vue内置指令

1.v-text：更新元素的 textContent。

<p v-text="text"></p>

2. v-html：更新元素的 innerHTML。

<div v-html="htmlContent"></div>

3.v-model：在表单控件元素上创建双向数据绑定。

<input v-model="value">

4.v-show：根据表达式的真假切换元素的显示与隐藏。

<div v-show="isVisible">Now you see me</div>

5.v-if：根据表达式的真假条件性地渲染元素。

<p v-if="isVisible">Visible</p>

6.v-else：v-if 的补充指令，用于显示条件为假时的备用内容

<p v-if="isVisible">Visible</p><p v-else>Not Visible</p>

7.v-else-if：连续使用于 v-if 和 v-else 之后，用于多条件判断。

<template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template>

8.v-for：遍历数组或对象的每个元素，生成相应数量的元素。

<li v-for="(item, index) in items" :key="index">{{ item }}</li>

9.v-on：绑定事件监听器。

<button v-on:click="handleClick">Click me</button>

10.v-bind：动态绑定 HTML 属性。

<img v-bind:src="imageSrc">

11.v-slot：用于具名插槽的语法，提供插入子组件内容的位置。

<template v-slot:header><h2>Header</h2></template>

12.v-pre：跳过这个元素和它的所有子元素的编译过程。

<div v-pre>{{ message }}</div>

13.v-cloak：在 Vue 实例编译完成前隐藏模板内容。

<div v-cloak>{{ message }}</div>

14v-once：只渲染元素和组件一次，不会随后续数据变化而更新。

<p v-once>{{ message }}</p>

原文地址：https://blog.csdn.net/qq_64214481/article/details/143669199

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！