Vue框架的常用指令（一）

最新推荐文章于 2023-06-22 12:48:45 发布

own_monkey

最新推荐文章于 2023-06-22 12:48:45 发布

阅读量110

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/own_monkey/article/details/128492833

版权

1.v-if

v-if的作用是通过判读布尔值进行对dom的上树和下树的渲染。

例如：

<body>

<div id = 'app'>

<h1>{{a}}</h1>

<p v-if="a < 3">我小于3</p>

<p v-else-if="a == 3">我等于3</p>

<p v-else>我大于3</p>

<button @click="add">按我加1</button>

</div>

<script src="js/vue.js"></script>

<script>

new Vue({

//挂载点

el:'#app',

//数据

data:{

a:0

},

//方法

methods:{

add(){

this.a++

},

},

})

</script>

</body>

结果为：

需要注意的是v-else的使用前提是必须先有v-if并且中间不允许有任何的元素间隔。

<p v-if="a < 3">我小于3</p>

<div></div>

<p v-else-if="a == 3">我等于3</p>

<p v-else>我大于3</p>

上面的代码写法是错误的，div不能在v-if和v-else-if，v-else之间进行拆分

2.v-show

v-show 和 v-if 的显示情况类似，但原理不一样，v-show是通过控制元素display属性，对元素的显示和隐藏进行逻辑判断，并没有实现元素的下树。

<body>

<div id = 'app'>

<p v-show="a == 3">我是3</p>

<button @click="add">按我加1</button>

</div>

<script src="js/vue.js"></script>

<script>

new Vue({

//挂载点

el:'#app',

//数据

data:{

a:0

},

//方法

methods:{

add(){

this.a++

},

},

})

</script>

</body>

结果为：

v-show和v-if的使用场景区分：

如果页面切换的特别频繁使用v-show；

如果页面的涉及范围特别大并且不是特别频繁的切换使用v-if。

主要区分就是页面的加载性能。

3.v-once

v-once的作用是只会渲染对应元素一次，数据更新不会引起视图的更新，目的是为了优化页面的性能。

使用场景通常是没有动态的元素内容，比如一些文章，一些固定标题

例如：

<body>

<div id = 'app'>

<h1 v-once>{{a}}</h1>

<button @click="add">按我加1</button>

</div>

<script src="js/vue.js"></script>

<script>

new Vue({

//挂载点

el:'#app',

//数据

data:{

a:100

},

//方法

methods:{

add(){

this.a++

console.log(this.a)

},

},

})

</script>

</body>