Vue3.0 学习笔记 4

条件渲染

v-if指令

v-if指令用于动态渲染一块内容，只有当该指令的表达式值为true时才渲染，也可配套使用v-else指令设置一个else-if块和else块

<h1 v-if="ifSee">hello Vue3.0!</h1>
<h1 v-else-if="ifSeeMore">hello more Vue3.0!</h1>
<h1 v-else>Oh no!</h1>

data(){
    return {
        ifSee:false,
        ifSeeMore:true
    }
}

需要注意的是v-if指令的表达式值为false时，这个DOM元素将不会存在于DOM树中，即不会被渲染。

v-if指令在template元素上使用

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
  <h1>title</h1>
  <p>P1</p>
  <p>P2</p>
</template>

v-show指令

v-show指令也可以控制一块内容的显示，但是和v-if不同的是，其表达式值为false时仍然会渲染，只是切换style为display

<h1 v-show="ifSee">hello Vue3.0!</h1>

data(){
    return {
        ifSee:false,
        ifSeeMore:true
    }
}

渲染成

<h1 style="display;">hello Vue3.0!</h1>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

v-for指令

v-for指令可以将一个数组渲染成一个列表

data(){
    return {
        msg:[{message:"I"},{message:"AND"},{message:"YOU"}]
    }
}

<ul>
  <li v-for="m in msg">
      {{ m.message }}
  </li>
</ul>

v-for的参数是"item in items"的格式，item是数组元素别名，items是data里的数组属性名；其还支持一种参数格式：(item,index) in items，item为数组元素别名，index是当前项的索引（如果是对象则是key），in也可以换成of->item of items

v-for指令将一个对象渲染成一个列表

data(){
    return {
        people:{
            name:"xxx",
            age:22,
            sex:"女"
        }
    }
}

<ul>
  <li v-for="value of people">
      {{value}}
  </li>
</ul>

对于对象，v-for还支持第三种参数格式(value,key,index) in obj，value为值，key为当前条目对象属性名，index为当前条目索引。

当数组或对象的数据项位置发生改变时，Vue将不会移动DOM元素来匹配数据项的顺序，而是直接更新DOM元素的值来匹配。因此对于每一个数据项如果是一个对象的话，排序将只会改变排序字段的值，而其他对应字段的值不会对应排序，因此你需要指定一个key来标识一个数据项来保证Vue能够实现跟踪更新。

v-for支持整形数字

<div id="range" class="demo">
  <span v-for="n in 10">{{ n }} </span>
</div>

在 <template> 中使用 v-for

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

注意：当v-for和v-if一起使用时，由于v-if的优先级比v-for高，这意味着v-if将不能访问v-for里的变量

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

可以改写为

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

在组件上使用v-for

待续…

以改写为

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

在组件上使用v-for

待续…