Class与style绑定、条件渲染和列表渲染

目标:

  1. 熟练使用class与style绑定的多种方式
  2. 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项

class与style绑定的多种方式

  1. 绑定class和style都是使用v-bind也就是:
  2. 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组.
  3. class和:class是共存的

绑定示例

1.class对象绑定

    <!-- 根据isActivity的真假,判断是否应用activity这个class -->
<div :class="{activity:isActivity}"></div>

2.class数组绑定

    <!-- 应用数组里面的class -->
<div :class="[activity, activityOne]"></div>

3.style对象绑定

    <!-- 应用这个样式对象的样式 -->
<div :style="styleObj"></div> <script>
...
//styleObj写在data里面
data() {
return {
styleObj: {
color: 'black'
}
}
}
...
</script>

4.style数组绑定

    <!-- 应用这个数组里面的样式 -->
<div :style="[styleObj,{fontSize:'25px'}]"></div>

v-if与v-for的用法

条件渲染

1.v-if="表达式", 表达式的真假值决定了是否挂载到页面上

     <div v-if="isTrue">这一段会在html里面,而且会显示出来</div>
<div v-if="isFalse">这段不会在html里面,也不会显示出来</div>

2.v-show="表达式", 表达式的真假值决定了该节点的display属性是none / block

     <div v-show="isTrue">display: block,会显示出来</div>
<div v-show="isFalse">display: none,不会显示出来</div>

3.区别: 功能都是一样,实现节点是否显示出来,但是v-if会操作dom,会重新渲染页面

4.v-if的话,还有v-if-else和v-else这两个命令, 不过要连着一起用,中间不能有其他东西隔开,使用规则和js的if..else语句一样

列表渲染

1.v-for of

     <li v-for="item of list">{{item}}</li>   //其中list为数组,item为数组元素
<li v-for="(item,index) of list">{{index}}{{item}}</li> //其中list为数组,index为索引(第一个0开始),item为数组元素

2.循环渲染对象

     //其中userInfo为对象, item为值, key为键, index为索引
<li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>

3.一般会加个key值,避免互相影响(语法检测会检测这个,添加key值之后就会互相区分独立,相同部分也会重新渲染,不会复用)

     <li v-for="(item, index) of list" :key="index"></li>
或<li v-for="(item, index) of list" :key="item.id"></li>

4.key和index是可选的

v-if和v-for一起使用的注意事项

1.v-for的优先级比v-if更高, 如果它们处于同一个节点,这样v-if将分别重复运行于每个v-for循环中.

也就是, 先执行v-for,v-for出来的每一项都会执行一次v-if.

<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

2.如果想先执行v-if再判断是否执行v-for, 可以将v-if置于外层元素(或template)上.

<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>

Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染的更多相关文章

  1. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  2. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

  3. Vue学习计划基础笔记(一) - vue实例

    最近又重新看vue的文档了,计划是别人写的,之前看过一次,没有考虑太多,只考虑看懂能用就好.看完之后写过写demo,现在是零实际项目经验的,所以这一次打算细看,算是官方文档的二次产物吧,但是不是全部直 ...

  4. Vue学习计划基础笔记(四) - 事件处理

    事件处理 目标: 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符 理解在html中监听事件的意义 监听事件(v-on) 类似普通的on,例如v-on:click或@click就相当于普通的 ...

  5. Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器

    模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...

  6. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  7. Vue学习(二):class与style绑定

    <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...

  8. 学习webpack基础笔记01

    学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...

  9. react 入坑笔记(五) - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

随机推荐

  1. mysql5.6编译安装

    1.安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl -y yum -y install wget gcc-c++ ncurses nc ...

  2. PDO介绍(16)

    安装PDO PDO的数据选项 链接到数据库服务器并选择数据库 错误处理 获取和设置属性 查询执行 准备语句介绍 获取数据 设置绑定列 处理事务

  3. 【Javascript-基础-Date】本地时间与UTC(GMT)时间转换

    UTC(GMT) 整个地球分为二十四时区,每个时区都有自己的本地时间.在国际无线电通信场合,为了统一起见,使用一个统一的时间,称为通用协调时(UTC, Universal Time Coordinat ...

  4. 转发: Angular装饰器

    Angular中的装饰器是一个函数,它将元数据添加到类.类成员(属性.方法)和函数参数. 用法:要想应用装饰器,把它放在被装饰对象的上面或左边. Angular使用自己的一套装饰器来实现应用程序各部件 ...

  5. Python中模块

    模块 模块对我来说是什么 模块对我来说,感觉就像亲属或者朋友已经走过的路,他们已经趟过的浑水.掉过的坑.践行过的路线,全部提供给你,在你需要的时候请求帮助,借鉴他们的解决方法一样.都是为了方便走好人生 ...

  6. flask中的蓝图实现模块化的应用

    Blueprint 蓝图的基本设想是当它们注册到应用上时,它们记录将会被执行的操作. 当分派请求和生成从一个端点到另一个的 URL 时,Flask 会关联蓝图中的视图函数. 简单来说,Blueprin ...

  7. table(表格)中的标签和属性

    1.表格由 <table> 标签来定义.行( <tr> ),单元格(<td> ) 字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以 ...

  8. echarts踩坑---容器高度自适应

    在echarts中,若设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题. 具体解决办法如下: <d ...

  9. 学在Java之前

    java基础 下载JDK JDK(Java Development Kit  Java开发工具包) 官方网址: www.oracle.com                参阅oracle.html ...

  10. Microbit蓝芽配对

    Microbit蓝芽配对 (Bluetooth Pairing) Microbit 可以像手机或平板与其他蓝芽装置一样,一旦做完第一次配对完就可以使用”蓝芽服务” paired with the mi ...