Vue之v-if、v-show和v-bind

最新推荐文章于 2021-11-22 21:35:38 发布

mzf19980423

最新推荐文章于 2021-11-22 21:35:38 发布

阅读量284

点赞数

分类专栏：前端 vue 文章标签： vue html javascript js

本文链接：https://blog.youkuaiyun.com/weixin_45153932/article/details/115481595

版权

前端同时被 2 个专栏收录

35 篇文章

订阅专栏

vue

11 篇文章

订阅专栏

本文详细介绍了Vue.js中的条件渲染指令v-if和v-show，包括它们的区别和使用场景。v-if通过移除和插入DOM实现条件渲染，而v-show则是通过切换CSS的display属性。此外，还讲解了v-bind的用法，用于动态绑定HTML元素的属性，使得数据变化能实时反映到视图上。示例代码展示了如何在Vue实例中使用这些指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、v-if和v-show使用

v-if和v-show：作用都是用来控制页面中标签是否展示和隐藏
使用：标签v-if=“true|false” v-show=“true|false”
区别：
v-show：底层在控制页面标签是否展示时底层使用的是css中display属性来控制标签的展示和隐藏
v-if: 底层在控制页面标签是否展示时底层是直接操作DOM元素，通过对DOM元素删除和添加来控制标签的展示和隐藏

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<script>
	var app3 = new Vue({
	  el: '#app-3',
	  data: {
	    seen: true
	  }
	})
</script>

2、v-bind 绑定

**v-bind：**绑定
**作用：**用来将html标签中相关属性绑定到vue实例中，日后通过对vue实例中数据改变，影响到对应标签中属性值变化
语法： v-bind：属性名
简化写法： ：属性名

<div id="app-3">
  <img v-bind:src="imgsrc" v-bind:alt="imgalt">
</div>

<script>
	var app3 = new Vue({
	  el: '#app-3',
	  data: {
	    seen: true,
	    imgsrc:"图片地址",
	    imgalt:"这是图片"
	  }
	})
</script>