Vue的指令

2020-06-07  本文已影响0人  八月飞花

vue指令

vue内置了大量的好用的指令,这些指令是我们更加随心所欲地操作html节点

v-text

说明

用于将一个数据绑定到标签上,这个数据可以是data中的数据,也可以是computed的计算属性
绑定的数据会覆盖该标签的内容
与{{message}}作用一样,但是避免了闪屏现象

使用

<span v-text="message"></span>

v-html

将插入的数据,解析为html文档,但是vue不会对该数据进行编译等操作

v-show

用于控制元素的样式的显示和隐藏,控制display的值为none或者block
当v-show=true时显示标签
当v-show=false时隐藏组件

v-if

用于控制组件的创建或者销毁,可以触发生命周期函数,beforeCreate,created,destoyed,beforeDestory

v-else

配合v-if组成一个显示的组合

v-else-if

配合v-if和v-else控制多个组件的单独创建销毁

v-for

遍历元素,并填充每个模板

v-on

v-bind

v-modle

v-slot

v-pre

v-cloak

v-once

上一篇下一篇

猜你喜欢

热点阅读