为古汉字老人做网站,四川省微信网站建设,网页制作工具哪些好用,无锡外贸网站开发注意:如果属性和方法还没定义直接使用的话#xff0c;就会报 xxx is not defined 导致界面不能正常显示。我看视频教程里老师的可以直接使用#xff0c;而且界面正常显示#xff0c;可能是vue版本不同吗#xff1f;还不清楚 1 !DOCTYPE html2 html lang就会报 xxx is not defined 导致界面不能正常显示。我看视频教程里老师的可以直接使用而且界面正常显示可能是vue版本不同吗还不清楚 1 !DOCTYPE html2 html langen3 4 head5 meta charsetutf-86 meta nameviewport contentwidthdevice-width,initial-scale1.07 titleDocument/title8 !--1.导入Vue的包--9 script src https://cdn.jsdelivr.net/npm/vue/script
10 /head
11
12 body
13 div idapp
14 div
15 labelId:
16 input typetext v-model id
17 /label
18
19 labelName:
20 input typetext v-modelname
21 /label
22
23 input typebutton value添加 clickadd
24
25 /div
26 !-- 注意v-for循环的时候key属性智能使用number获取string --
27 !-- 注意key 在使用的时候必须适应v-bind属性绑定的形式指定key的值 --
28 !--添加key是为了保证数据的唯一性进行数据的关联防止出现一些问题--
29
30 !-- 在组件中使用v-for循环的时候或者在一些特殊情况中如果v-for有问题必须在使用v-for 的同时指定唯一的字符串/数字类型 :key值 --
31 p v-foritem in list :keyitem.id
32 input typecheckbox{{item.id}}---
33 {{item.name}}
34 /p
35 /div
36
37
38 script
39 //创建 Vue 实例得到 ViewModel
40 var vm new Vue({
41 el:#app,
42 data:{
43 id:,
44 name:,
45 list:[
46 {id:1,name:李斯},
47 {id:2,name:嬴政},
48 {id:3,name:赵高},
49 {id:4,name:韩非},
50 {id:5,name:荀子}
51 ]
52 },
53 methods:{
54 add(){//添加方法
55 // this.list.push({id:this.id,name:this.name})
56 this.list.unshift({id:this.id,name:this.name})
57 }
58 }
59 });
60 /script
61 /body
62 /html 转载于:https://www.cnblogs.com/songsongblue/p/10988431.html
