用法一、布尔值ture/false 显示/隐藏元素
1. true 显示元素:v-if的值和seen 属性值一致,为 true。<p>元素显示
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
2.flase 隐藏元素:把app3.seen 属性值改为false,v-if的值也为false,<p>元素隐藏
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
app3.seen=false
</script>
用法二、在<template>元素上使用,显示/ 隐藏整个分组(就是同时显示/ 隐藏多个元素)
注意:
vue 函数绑定的元素要包裹在 <template> 元素外面,也就是说,要绑定在<template> 元素的父元素上,不能直接绑定在<template>元素
例子中,a=new Vue 绑定在 <template> 的父元素<div id="app">
<div id="app">
<template v-if="true">
<p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
<p >Using v-html directive: </p>
</template>
</div>
<script> //vue js 代码写在这里
var a=new Vue({
el:"#app", //绑定的元素
data:{ rawHtml:'<span style="color:red">利用vue添加了插入一个span 元素</span>' //元素内数据代码 message
}
});
</script>
当v-if 的值为 true 时,网页显示<template> 包裹的所有元素;
网页效果:
当v-if 的值为 false 时,网页隐藏<template> 包裹的所有元素;
<div id="app">
<template v-if="flase">
<p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
<p >Using v-html directive: </p>
</template>
</div>
网页效果:<template> 包裹的<p>元素 都被隐藏了