vue v-for / 重新渲染dom
vue 2017-11-15 15:18:44

预期：Array | Object | number | string 

用法：

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

XML/HTML Code复制内容到剪贴板
  1. <div v-for="item in items">  
  2. {{ item.text }}  
  3. </div>  

 

另外也可以为数组索引指定别名 (或者用于对象的键)：  

XML/HTML Code复制内容到剪贴板
  1. <div v-for="(item, index) in items"></div>  
  2. <div v-for="(val, key) in object"></div>  
  3. <div v-for="(val, key, index) in object"></div>  

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

XML/HTML Code复制内容到剪贴板
  1. <div v-for="item in items" :key="item.id">  
  2. {{ item.text }}  
  3. </div>  

 

为了给Vue一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有的元素，您需要key为每个项目提供一个唯一的属性。一个理想的价值key将是每个项目的唯一ID。这个特殊的属性大致等同track-by于1.x，但是它的作用就像一个属性，所以你需要使用v-bind它来绑定到动态值（在这里使用简写）：

<div v-for="item in items" :key="item.id">
<!-- content -->
</div>

v-for 的详细用法可以通过以下链接查看教程详细说明。

 

 

在ajax获取数据以后，重新渲染dom，这个selectedLessonList先在data里面要定义一个空数组 或者什么 ：

Vue.set 也可以写成：this.$set，就可以不用再引入一遍Vue了

XML/HTML Code复制内容到剪贴板
  1.                     <ul v-for="item in selectedLessonList">  
  2.                         <li>  
  3.                             <i class="control-icon up-icon"></i><span>{{item.label}}</span>  
  4.                             <i class="fr fa fa-trash-o" aria-hidden="true"></i>  
  5.                         </li>  
  6.                     </ul>  
  7.   
  8.   
  9. <script>  
  10.     import Vue from 'vue'  
  11.   
  12.     Vue.set(this,"selectedLessonList", val);  
  13. </script>  

 

JavaScript Code复制内容到剪贴板
  1. this.$set(this.dataIn[index],"checked",false);  

 

 

重新渲染：

JavaScript Code复制内容到剪贴板
  1. /* 重新渲染图表组件 */  
  2.                 this.$nextTick(function() {  
  3.                 // 业务   this.drawPie('result-echarts')  
  4.                 });  

 

  

还有一种情况，就是set也不好使，视图仍然没有渲染，查找的资料也是比较凌乱，并不能解决问题，后来看个贴子说是数据层次太多，没有触发render函数进行自动更新，需手动调用，调用方式如下

JavaScript Code复制内容到剪贴板
  1. this.$forceUpdate();  

 

 

 

 

 

限制循环出的条数：

XML/HTML Code复制内容到剪贴板
  1. <div v-for="(item, index) in tagList" v-if="index <= 5">  

 

 

v-for 循环输入输入框，绑定v-model的数据 

 

XML/HTML Code复制内容到剪贴板
  1. <div id="app">  
  2.     <input v-for="(item, index) in list" :key="index" v-model="list[index]" @change="print" />  
  3. </div>  

 

JavaScript Code复制内容到剪贴板
  1. new Vue({  
  2.     el: '#app',  
  3.     data: {  
  4.         list: {  
  5.             0: 'a',  
  6.             1: 'b',  
  7.             2: 'c'  
  8.         }  
  9.     },  
  10.     methods: {  
  11.         print() {  
  12.             console.log(this.list);  
  13.         }  
  14.     },  
  15.     mounted() {  
  16.         setTimeout(() => {  
  17.             this.list[0] = 'd';  
  18.             console.log(this.list);  
  19.         }, 1000);  
  20.     }  
  21. })  

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/207.html

上一篇 JS数组判断值是否存在于指定数组中
下一篇 vue router-link
相关的文章
Powered by yoyo苏ICP备15045725号