首页 > 其他 > 详细

Vue基础-v-for

时间:2019-12-14 21:22:32      阅读:85      评论:0      收藏:0      [点我收藏+]

一、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

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‘})

二、组件使用中的细节

技术分享图片jdhgvjf hb
 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>
is

Vue基础-v-for

原文:https://www.cnblogs.com/qdkfyym/p/12040673.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!