v-if动态的删除添加元素
v-show是动态的设置样式display
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="util/vue-2.4.0.js"></script>
</head>
<body>
<div id="test">
<input type="button" value="切换显示" @click="show"/>
<p v-if="tag">this is v-if</p>
<!-- v-if 在为false的时候,会在html结构中删除标签,为true的时候再添加标签-->
<!-- v-show在为false的时候,是添加了一个样式 display:none,为true的时候重新设置display:block -->
<p v-show="tag">this is v-show</p>
</div>
<script>
var vm1 = new Vue({
el:"#test",
data:{
tag:true
},
methods:{
show: function () {
this.tag = !this.tag
}
}
})
</script>
</body>
</html>
