Vue常用指令

107 阅读1分钟

5c557054af3c4f6b99fa55a84c540101_tplv-k3u1fbpfcp-zoom-crop-mark_3024_3024_3024_1702.webp

Vue常用指令

Vue常用指令是以v-开头的,作用在HTML上,
下面将介绍Vue中几种常用指令


一、v-htmlv-text

v-html:用于渲染普通文本,可以解析HTML标签

v-text:用于渲染普通文本,但不可以解析HTML标签

image.png

二、v-model

v-model:用于表单元素,实现数据的双向绑定

image.png

三、v-bind

v-bind:绑定属性的指令,无法实现数据的双向绑定

image.png

四、v-on

v-on:用于监听 DOM 事件,它的用语法和 v-bind 是类似的,简写形式为 @

image.png

五、v-if,v-else-if,v-else

v-if,v-else-if,v-else:如果条件成立就会渲染这个元素,条件不成立就不会渲染这个元素

image.png

六、v-show

v-show:通过display来控制元素的显示与影藏

image.png

注: v-if 初次加载性能更高 , v-show 切换上性能更高

七、v-for v-for:循环指令

image.png