一、v-for
v-bind简写 :,:key值后注意不要跟差值表达式,要跟字段或者js表达式
v-for的key值不用index,好性能,一般key值取接口里定义的唯一字段,如:id
1 <body> 2 <!--push pop shift unshift splice reverse sort--> 3 <div id="app"> 4 <div v-for=‘(item,index) of list‘ 5 :key=‘item.id‘ 6 > 7 {{item.text}}----{{index}} 8 </div> 9 </div> 10 </body> 11 <script> 12 var vm = new Vue({ 13 el:‘#app‘, 14 data:{ 15 list:[{ 16 id:‘001‘, 17 text:‘nice‘ 18 },{ 19 id:‘002‘, 20 text:‘to‘ 21 },{ 22 id:‘003‘, 23 text:‘meet‘ 24 }, 25 26 ] 27 } 28 }) 29 </script>
v-for ,如果想修改数组内容不能通过数组下标的方式去添加,那样只会改变数据,页面内容不会有变化,可以通过以下方式去修改
1.通过变异方法:push pop shift unshift splice reverse sort
2.改变数据引用
3.set方法,如改变数组下标为2的text值从"meet"变成“you”
Vue.set(vm.list,2,{text:‘meet3‘ }) 或 vm.$set(vm.list,2,{text:‘you‘})
二、组件使用中的细节
1 <body> 2 <div id="app"> 3 <table> 4 <tbody> 5 <row></row> 6 <row></row> 7 <row></row> 8 9 </tbody> 10 </table> 11 </div> 12 </body> 13 <script> 14 Vue.component(‘row‘,{ 15 template:"<tr><td>Data</td></tr>" 16 }) 17 var vm = new Vue({ 18 el:‘#app‘, 19 data:{ 20 }, 21 methods: { 22 } 23 }) 24 </script>
原文:https://www.cnblogs.com/qdkfyym/p/12040673.html