vue的常用指令及详解

简介: vue的常用指令及详解

Vue.js 是一个用于构建用户界面的渐进式框架,它提供了许多内置指令来帮助我们更高效地操作 DOM 和处理数据。以下是一些 Vue.js 的常用指令及其详解:


  1. v-text:
  • 用途:设置元素的文本内容。
  • 详解:它会替换元素的 textContent。如果你想替换元素的指定内容,可以使用插值表达式 {{ }}。v-text 的缩写形式也是 {{ }}。
  • 示例:<div v-text="message"></div>,当 message 的值为 "Hello" 时,该 div 的内容将会是 "Hello"。


  1. v-html:
  • 用途:更新元素的 innerHTML。
  • 详解:与 v-text 不同,v-html 会解析内容中的 HTML 结构。这意味着你可以插入带有标签的 HTML 内容。
  • 示例:<div v-html="htmlContent"></div>,当 htmlContent 的值为 "<h1>Hello</h1>" 时,该 div 会显示一个标题为 "Hello" 的 H1 标签。


  1. v-on:
  • 用途:为元素绑定事件。
  • 详解:你可以使用 v-on 来监听 DOM 事件,并在触发时执行一些 JavaScript 代码。事件名不需要写 on 前缀,例如 v-on:click 可以简写为 @click。
  • 示例:<button @click="handleClick">Click me</button>,当按钮被点击时,会调用 handleClick 方法。


  1. v-show:
  • 用途:根据条件切换元素的显示状态。
  • 详解:v-show 会根据表达式的真假来切换元素的 display 属性。当表达式的值为 true 时,元素显示;为 false 时,元素隐藏。
  • 示例:<div v-show="isVisible">I'm visible</div>,当 isVisible 为 true 时,div 显示;为 false 时,div 隐藏。


  1. v-if:
  • 用途:根据条件切换元素的渲染。
  • 详解:与 v-show 不同,v-if 是真正地添加或移除元素。当表达式的值为 true 时,元素会被渲染到 DOM 中;为 false 时,元素会被销毁。
  • 示例:<div v-if="isRendered">I'm rendered</div>,当 isRendered 为 true 时,div 会被渲染;为 false 时,div 不会被渲染。


  1. 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>`
  1. v-for:
  • 用途:基于数据源渲染一个列表。
  • 详解:v-for 可以遍历数组、对象、数字或字符串,并为每个元素生成一个模板。

示例:<ul><li v-for="item in items">{{ item }}</li></ul>,当 items 是一个数组时,会为数组中的每个元素生成一个 li 标签。

相关文章
|
1天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
1天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
1天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
4 0
|
1天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
1天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
1天前
|
JavaScript
vue封装svg
vue封装svg
6 0
|
1天前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
7 0
|
1天前
|
JavaScript
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
Vue 编写(preventReClick)防暴点 +防抖(debounce)和节流(throttle)函数
|
1天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
1天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
8 0