<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈啥,打字辛苦啊!!!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: false,
ok: false
}
})
</script>
如上代码。如果seen和ok都是true。就会把内容插入网页。如果是false就不会插入了。
如果seen为true而ok为false。结果就是
总而言之,谁是true,就有谁。
自己模仿一个例子
<div id="app">
<div v-if="shacha">good man</div>
</div>
<script>
new Vue({
el: '#app',
data: {
shacha:true
}
})
</script>
使用方法就是在任意元素内随便写一个v-if=“xx”。
然后在script标签内规定xx的true or false。 true那段代码就会执行。 xx随便编,只要能跟data标签里的对应起来就行。
如果用原生js实现该功能的话,就得先获取Dom元素,然后采用if语句,之后采用隐藏或者显示方法。想想都麻烦。
总而言之,js是个垃圾!所以前端框架层出不穷~~~