Vue学习之v-if和v-on的示例

2025-06-07 01:37:58

1、打开WebStorm开发工具，新建‘test.html’，将vue.js文件放在同个目录，引入vue.js文件

2、在页面添加一个div标签，使用vue对象设置内容，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src = "vue.js"> </script></head><body> <div id = "app"> <div> {{msg}} </div> </div> <script> var app = new Vue({ el : "#app", data : { msg:"hello", } }) </script></body></html>

3、在浏览器查看效果，页面打印出hello

4、使用v-if，隐藏上面的hello，代码如下：<!DOCTYPE html><html lang租涫疼迟="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src = "vue.js"> </script></head><body> <div id = "app"> 外层div <div v-if = show> {{msg}} </div> </div> <script> var app = new Vue({ el : "#app", data : { msg:"hello", show:false, } }) </script></body></html>

5、在浏览器中打开，只显示处外层div ，hello并隐藏了。

6、添加一个Button使点击按钮时，hello能显示出来，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src = "vue.js"> </script></head><body> <div id = "app"> 外层div <div v-if = "show"> {{msg}} </div> <div> <button v-on:click = "clickHandler">点我切换显示</button> </div> </div> <script> var app = new Vue({ el : "#app", data : { msg:"hello", show:false, }, methods:{ clickHandler:function(){ this.show = true; } } }) </script></body></html>

7、在查看，点击按钮，hello又显示出来了

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。