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

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>

最后

以上就是呆萌皮卡丘为你收集整理的Vue之v-if、v-show和v-bind的全部内容，希望文章能够帮你解决Vue之v-if、v-show和v-bind所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。