Vue.js是一套构建用户界面的渐进式框架，它使用了数据驱动和组件化的思想来构建Web应用程序。Vue.js提供了一些指令帮助我们控制元素的显示和隐藏， 简单易用，功能强大。下面将从以下几个方面详细介绍Vue控制元素的显示和隐藏。
一、v-show控制元素的显示隐藏
v-show指令可以控制元素的显示和隐藏，它根据表达式的值来决定元素的显示或隐藏。如果表达式的值为true，那么元素显示，否则元素隐藏。相比于v-if指令，v-show指令在频繁切换元素的显示和隐藏时，性能更好，因为它只是通过CSS控制元素的显示和隐藏，而不是真正地添加或删除DOM元素。
<template>
<div>
<p v-show="isShow">这是一个测试段落</p>
<button @click="toggle">切换段落的显示与隐藏</button>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
}
},
methods: {
toggle() {
this.isShow = !this.isShow
}
}
}
</script>
上面的代码中，v-show指令通过绑定isShow变量控制段落的显示和隐藏。在toggle方法中，通过改变isShow变量的值，来切换段落的显示和隐藏。点击切换按钮，可以发现段落的显示和隐藏。
二、Vue显示和隐藏指令
Vue.js还提供了另外两个指令——v-if和v-else。v-if指令根据表达式的值来判断元素是否渲染。如果表达式的值为true，那么元素会被渲染，否则元素不会被渲染。v-else指令必须跟在v-if之后，它不需要表达式，只需要在前面加上关键字“else”即可。v-else指令只有在前面有v-if指令时才能使用，它表示在前面的v-if指令的表达式为false时渲染的元素。
<template>
<div>
<p v-if="isShow">这是一个测试段落</p>
<p v-else>这是段落隐藏时显示的文本</p>
<button @click="toggle">切换段落的显示与隐藏</button>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
}
},
methods: {
toggle() {
this.isShow = !this.isShow
}
}
}
</script>
上面的代码中，v-if指令和v-else指令通过绑定isShow变量来控制段落的显示和隐藏。在toggle方法中，通过改变isShow变量的值，来切换段落的显示和隐藏。点击切换按钮，可以发现段落的显示和隐藏以及对应的文本，根据isShow的值变化。
三、Vue点击显示和隐藏
Vue.js既可以通过指令控制元素的显示和隐藏，也可以通过点击事件来控制元素的显示和隐藏。
<template>
<div>
<p v-show="isShow" @click="hide">这是一个测试段落，点击隐藏</p>
<p v-show="!isShow" @click="show">点击显示段落</p>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
}
},
methods: {
show() {
this.isShow = true
},
hide() {
this.isShow = false
}
}
}
</script>
上面的代码中，利用了v-show指令，通过绑定isShow变量来控制段落的显示和隐藏，同时利用@click事件绑定show和hide方法，来实现点击显示和隐藏。
四、Vue控制显示隐藏选取
Vue.js还提供了另外一个指令——v-for，它可以用来遍历一个数组或一个对象，并渲染对应的元素。结合v-if指令，我们可以实现根据选项控制显示和隐藏元素的功能。
<template>
<div>
<select v-model="selected">
<option v-for="(item, index) in items" :key="index" :value="item">{{item}}</option>
</select>
<p v-for="(item, index) in items" :key="index" v-if="item === selected">{{item}}</p>
</div>
</template>
<script>
export default {
data() {
return {
selected: '',
items: ['选项1','选项2','选项3','选项4','选项5']
}
}
}
</script>
上面的代码中，我们创建了一个下拉选框，可以选择一个选项，然后根据选项来显示一个段落。我们利用了v-for指令来遍历items数组，并渲染对应的选项。在段落的显示上，我们通过v-if指令，并利用绑定到选项的值和selected变量的值进行比较，来决定段落的显示和隐藏。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285235.html
微信扫一扫 
支付宝扫一扫 