Vue.js 基础指令

398 阅读1分钟

指令的本质就是 HTML 自定义属性
Vue.js 的指令就是以 v- 开头的自定义属性

内容处理

  • v-once 指令
  • v-text 指令
  • v-html 指令

v-once指令

  • 使元素内部的插值表达式只生效一次。

image.png

v-text指令

元素内容整体替换为指定纯文本数据。

image.png

v-html 指令

元素内容整体替换为指定的 HTML 文本。

image.png

属性绑定

  • v-bind 指令
  • Class 绑定
  • Style 绑定

v-bind 指令

用于动态绑定 HTML 属性。

   Vue.js 还为 v-bind 指令提供了简写方式。
   <p v-bind:title="mytitle">这里不写html没有文字</p>
   <p :title="mytitle">这里不写html没有文字</p>

image.png

  • 与插值表达式类似,v-bind 中也允许使用表达式。

image.png

  • 如果需要一次绑定多个属性,还可以绑定对象。

image.png

Class 绑定

  • class 是 HTML 属性,可以通过 v-bind 进行绑定,并且可以与 class 属性共存。

image.png

image.png

image.png

  • 对于 class 绑定, Vue.js 中还提供了特殊处理方式。

image.png

image.png

style 绑定

  • style 是 HTML 属性,可以通过 v-bind 进行绑定,并且可以与 style 属性共存。 image.png
  • 当我们希望给元素绑定多个样式对象时,可以设置为数组。

image.png

渲染指令

v-for 指令

  • 用于遍历数据渲染结构,常用的数组与对象均可遍历。

image.png

  • 通过