vue入门例子
vue入门例子
1、声明示渲染 {{message}}
2、绑定事件 v-bind
3、控制切换一个程序是否显示 v-if
4、渲染循环 v-for
5、点击事件 v-on
6、双向数据绑定 v-model
一、声明示渲染 {{message}} 例:
1
2
3
4
{{message}}
5
6
7
8
9
19
20
效果如下:
二、绑定事件 v-bind 例:
鼠标悬停几秒,查看动态绑定的提示信息!
显示效果如下:
请把鼠标悬停几秒,会有提示信息。
三、控制切换一个程序是否显示 v- for 例:
1
2
3
4
if="showMsg">大家好!
5
6
7
8
9
19
20
效果如下:
四、渲染循环 v-for 例:
1
2
3
4
5 - for="list in lists">{{list.text}}
6
7
8
9
10
11
25
26
效果如下:
五、点击事件 v-on: 例:
1
2
3
4
{{message}}
5
6
7
8
9
10
25
26
点击按钮之后,字母可以反转,变为
六、双向数据绑定 v-model 例:
1
2
3 {{msg}}
4
5
6
7
8
18
19
效果如下:
尝试在input框里输入一些东西,查看效果,例: