ToDoMore

土豆末

0%

Vue 学习计划基础笔记(三) - 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 对象绑定
1
2
<!-- 根据isActivity的真假,判断是否应用activity这个class -->
<div :class="{activity:isActivity}"></div>
  1. class 数组绑定
1
2
<!-- 应用数组里面的class -->
<div :class="[activity, activityOne]"></div>
  1. style 对象绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 应用这个样式对象的样式 -->
<div :style="styleObj"></div>

<script>
     ...
  //styleObj写在data里面
  data() {
      return {
             styleObj: {
                 color: 'black'
             }
      }
     }
     ...
</script>
  1. style 数组绑定
1
2
<!-- 应用这个数组里面的样式 -->
<div :style="[styleObj,{fontSize:'25px'}]"></div>

v-if 与 v-for 的用法

条件渲染

  1. v-if=”表达式”, 表达式的真假值决定了是否挂载到页面上
1
2
<div v-if="isTrue">这一段会在html里面,而且会显示出来</div>
<div v-if="isFalse">这段不会在html里面,也不会显示出来</div>
  1. v-show=”表达式”, 表达式的真假值决定了该节点的 display 属性是 none / block
1
2
<div v-show="isTrue">display: block,会显示出来</div>
<div v-show="isFalse">display: none,不会显示出来</div>
  1. 区别: 功能都是一样,实现节点是否显示出来,但是 v-if 会操作 dom,会重新渲染页面

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

列表渲染

  1. v-for of
1
2
3
4
<li v-for="item of list">{{item}}</li>
//其中list为数组,item为数组元素
<li v-for="(item,index) of list">{{index}}{{item}}</li>
//其中list为数组,index为索引(第一个0开始),item为数组元素
  1. 循环渲染对象
1
2
//其中userInfo为对象, item为值, key为键, index为索引
<li v-for="(item, key, index) of userInfo">{{item}}{{key}}{{index}}</li>
  1. 一般会加个 key 值,避免互相影响(语法检测会检测这个,添加 key 值之后就会互相区分独立,相同部分也会重新渲染,不会复用)
1
2
3
<li v-for="(item, index) of list" :key="index"></li>
或
<li v-for="(item, index) of list" :key="item.id"></li>
  1. key 和 index 是可选的

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

  1. v-for 的优先级比 v-if 更高, 如果它们处于同一个节点,这样 v-if 将分别重复运行于每个 v-for 循环中.
    也就是, 先执行 v-for,v-for 出来的每一项都会执行一次 v-if.
1
2
3
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
  1. 如果想先执行 v-if 再判断是否执行 v-for, 可以将 v-if 置于外层元素(或 template)上.
1
2
3
4
5
6
<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>