该文介绍了Vue.js中的v-if指令用于在表达式为真时有条件地渲染元素。当a等于1时，一个包含<h1>标题</h1><p>你好</p><p>hello</p>的模板内容会被渲染。点击按钮可以增加a的值，从而改变渲染状态。使用<template>元素可以包裹多条要切换的内容。
v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。- 因为
v-if是一个指令，所以必须将它添加到一个元素上。若想切换多个元素，可以使用<template>元素当做不可见的包裹元素，并在上面使用v-if。
<body>
<div id="root">
<h2>当前的a值是:{{a}}</h2>
<button @click="a++">点我a+1</button>
<template v-if="a === 1">
<h1>标题</h1>
<p>你好</p>
<p>hello</p>
</template>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
var vm = new Vue({
el:'#root',
data:{
a:0
}
})
</script>
指令的表达式返回truthy值时显示为
最终的渲染结果将不包含 <template> 元素。
扫一扫
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
