示例小白教程网www.2d5.net 代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js中v-show指令</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
</head>
<body>
<!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值-->
<div id="app">
<!--属性xianshi1的值为true,则下面段落内容会显示在浏览器-->
<div v-show="xianshi1" id="id01">show=true</div>
<!--属性xianshi2的值为false,则下面段落内容不会显示在浏览器-->
<div v-show="xianshi2" id="id02">show=false</div>
</div>
<script>
//下面是Vue.js的代码块-开始
new Vue({
el: '#app',//app为前面div区块的id的值，通过"#"号绑定
//data区域定义属性的值
data: {
xianshi1:true, //定义布尔型值
xianshi2:false //定义布尔型值
//后面没有数据，则这里定义完毕后面不需要跟上逗号"，"
}
})//Vue.js的代码块-结束
</script>
</body>
</html>效果图小白教程网www.2d5.net 
|
