Vue.js 是一个用于构建用户界面的渐进式框架,它提供了许多内置指令来帮助我们更高效地操作 DOM 和处理数据。以下是一些 Vue.js 的常用指令及其详解:
- v-text:
- 用途:设置元素的文本内容。
- 详解:它会替换元素的 textContent。如果你想替换元素的指定内容,可以使用插值表达式 {{ }}。v-text 的缩写形式也是 {{ }}。
- 示例:<div v-text="message"></div>,当 message 的值为 "Hello" 时,该 div 的内容将会是 "Hello"。
- v-html:
- 用途:更新元素的 innerHTML。
- 详解:与 v-text 不同,v-html 会解析内容中的 HTML 结构。这意味着你可以插入带有标签的 HTML 内容。
- 示例:<div v-html="htmlContent"></div>,当 htmlContent 的值为 "<h1>Hello</h1>" 时,该 div 会显示一个标题为 "Hello" 的 H1 标签。
- v-on:
- 用途:为元素绑定事件。
- 详解:你可以使用 v-on 来监听 DOM 事件,并在触发时执行一些 JavaScript 代码。事件名不需要写 on 前缀,例如 v-on:click 可以简写为 @click。
- 示例:<button @click="handleClick">Click me</button>,当按钮被点击时,会调用 handleClick 方法。
- v-show:
- 用途:根据条件切换元素的显示状态。
- 详解:v-show 会根据表达式的真假来切换元素的 display 属性。当表达式的值为 true 时,元素显示;为 false 时,元素隐藏。
- 示例:<div v-show="isVisible">I'm visible</div>,当 isVisible 为 true 时,div 显示;为 false 时,div 隐藏。
- v-if:
- 用途:根据条件切换元素的渲染。
- 详解:与 v-show 不同,v-if 是真正地添加或移除元素。当表达式的值为 true 时,元素会被渲染到 DOM 中;为 false 时,元素会被销毁。
- 示例:<div v-if="isRendered">I'm rendered</div>,当 isRendered 为 true 时,div 会被渲染;为 false 时,div 不会被渲染。
- v-else:
- 用途:与 v-if 或 v-else-if 一起使用,表示条件不满足时的备选内容。
- 详解:v-else 必须紧跟在 v-if 或 v-else-if 后面,并且不能单独使用。
示例:
html`<div> <div v-if="score > 90">优秀</div> <div v-else-if="score > 60">及格</div> <div v-else>不及格</div> </div>`
- v-for:
- 用途:基于数据源渲染一个列表。
- 详解:v-for 可以遍历数组、对象、数字或字符串,并为每个元素生成一个模板。
示例:<ul><li v-for="item in items">{{ item }}</li></ul>,当 items 是一个数组时,会为数组中的每个元素生成一个 li 标签。