vue入门例子


vue入门例子

1、声明示渲染               {{message}}

2、绑定事件           v-bind

3、控制切换一个程序是否显示        v-if

4、渲染循环                                   v-for

5、点击事件                                   v-on

6、双向数据绑定              v-model

一、声明示渲染   {{message}}     例:

 1 
 8 
 9 
19 
20 

  效果如下:

二、绑定事件      v-bind       例:





  显示效果如下:

  请把鼠标悬停几秒,会有提示信息。

三、控制切换一个程序是否显示   v- for      例:

 1 
 8 
 9 
19 
20 

  效果如下:

 

 

四、渲染循环        v-for       例:

 1 
10 
11 
25 
26 

  效果如下:

五、点击事件   v-on:      例:

 1 
 9 
10 
25 
26 

  点击按钮之后,字母可以反转,变为

 

 

 

六、双向数据绑定       v-model    例:

 1 
 7 
 8 
18 
19 

  效果如下:

 

   尝试在input框里输入一些东西,查看效果,例: