Vue.js笔记-条件渲染列表渲染

条件渲染v-ifdiv id="demo">div v-if="abc">{{abc.a}}div> //该值为true时显示该标签，为false则不显示div>var vm = new Vue({el:'#demo',data:{abc:{a:"1"} }})script>if...else结构h1

糖同学前端er

7745人浏览 · 2016-10-28 15:01:11

糖同学前端er · 2016-10-28 15:01:11 发布

条件渲染

v-if

   
   <div id="demo">
	<div v-if="abc">{{abc.a}}</div>    //该值为true时显示该标签，为false则不显示
</div>
<script>
	var vm = new Vue({
		el:'#demo',
		data:{
			abc:{
				a:"1"
			}
         }
	})
</script>

if...else结构

    
    <h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

if...else if...else结构， if-else用嵌入的方式放进去

   
   <div v-if=""></div>
<template v-else>
    <div v-if=""></div>
    <div v-else></div>
</template>

v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

template v-if

如果想切换多个元素，可以把一个<template>元素当作包装元素，并在上面使用v-if，最终的渲染结果不会包含它。

   
   <template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。注意 v-show 不支持 <template> 语法。

   
   <h1 v-show="ok">Hello!</h1>

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

列表渲染

v-for

基于一个数组渲染一个列表。

语法：item in items（数组元素的别名 in 数据数组）

   
   <ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，是当前数组元素的索引。另外，可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：

    
    <div v-for="(index, item) in items">
  {{ index }} {{ item.message }}
</div>

从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：

    
    <div v-for="item of items"></div>

template v-for

渲染一个包含多个元素的块，需要将多个标签都用v-for遍历，那么就需要用template标签。同样，template在实际渲染的时候不会出现，只是起到一个包裹作用。

   
   <div id="app">
    <ul>
        <template v-for="i in items">
            <li>Index is {{$index}}</li>
            <li>Content is {{i}}</li>
        </template>
    </ul>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items: {
                a: "1",
                b: "2",
                c: "3"
            }
        }
    })
</script>

渲染为：

   
   <ul>
        <li>Index is 0</li><li>Content is 1</li>
        <li>Index is 1</li><li>Content is 2</li>
        <li>Index is 2</li><li>Content is 3</li>
</ul>

数组变动检测

变异方法（修改了原始数组）：

vue.js包装了被观察数组的变异方法，故它们能出发视图更新，即当利用这些方法变更数组时，被渲染的内容会实时更新，被包装的方法有：

push() 数组末尾添加
pop() 数组末尾取出
shift() 数组开头取出
unshift() 数组开头添加
splice() 删除并插入
sort() 排序
reverse() 数组顺序颠倒

   
       <ul id="demo">
        <li v-for = "item in items">
            {{item}}
        </li>
    </ul>
    <script>
        var vm = new Vue({
            el:'#demo',
            data:function(){
                return {items:[4,2,3].splice(0,2)};
            }
 
        })
    </script>

替换数组（返回一个新数组）：

数组从一个数组变为另一个数组时（记得，数组是按引用传递的），数据绑定依然生效；但前提是使用以下方法：

filter() 过滤，参数是一个函数，取其返回值为true的元素被添加到新数组

concat() 合并两个数组，返回的数组是合并后的

slice() 返回数组的拷贝，从开始索引到结束索引（前含后不含）

track-by：

有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。

例如，假定数据为：

    
    {
  items: [
    { _uid: '88f869d', ... },
    { _uid: '7496c10', ... }
  ]
}

然后可以这样给出提示：

    
    <div v-for="item in items" track-by="_uid">
  <!-- content -->
</div>

然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。

track-by $index

如果没有唯一的键供追踪，可以使用 track-by="$index"，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。

这让数据替换非常高效，但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变，不能同步临时状态（比如 <input> 元素的值）以及组件的私有状态。因此，如果 v-for 块包含 <input> 元素或子组件，要小心使用 track-by="$index"。

问题：

vue.js不能检测到下面数组变化：

直接用索引设置元素，如 vm.items[0] = {}

解决方案，$set()方法，demo.items.$set( 0 , {childMsg:'changed! '} )

修改数据的长度，如 vm.items.length = 0

解决方案：只需要用一个空数组替换items

从目标数组中查找并删除元素，在内部调用splice()，this.items.$remove(item)

   
   <ul id="demo">
        <li v-for = "item in items">
            {{item.name}}
        </li>
    </ul>
    <button onclick = "change()">移除</button>
    <script>
        var test = {name:'d'}
        var vm = new Vue({
            el:'#demo',
            data:{
                items:[
                    {name:'a'},
                    {name:'b'},
                    {name:'c'}
                ]
            },
        })
        vm.items.push(test);
        function change(){
            vm.items.$remove(test);
        }
    </script>

对象v-for

作用域内还可以访问另一个特殊变量$key

   
   <ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ $key }} : {{ value }}
  </li>
</ul>
new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

也可以给对象的键提供一个别名：

   
   <div v-for="(key, val) in object">
  {{ key }} {{ val }}
</div>

值域v-for

v-for 也可以接收一个整数，此时它将重复模板数次。

    
    <div>
  <span v-for="n in 10">{{ n }} </span>
</div>

结果为：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^