Vue学习之v-if和v-on的示例
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。
阅读量：156
阅读量：22
阅读量：20
阅读量：159
阅读量：162