vue指令大全

原创

wx6375cd1abf2fb 2022-11-18 00:19:33 博主文章分类：vue2 ©著作权

文章标签 vue指令 vue vue.js 前端 html 文章分类 运维

©著作权归作者所有：来自51CTO博客作者wx6375cd1abf2fb的原创作品，请联系作者获取转载授权，否则将追究法律责任

v-html：

template:
<div>{{rawHtml}}</div>
<div v-html="rawHtml"></div>

data:
rawHtml: '<span style="color:blue">fanfusuzi</span>'

vue指令大全_前端

尽管如此，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎，反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

v-if：

template:
<div v-if="seen"></div>

data:
seen: true
seen: false

当值为真的时候就渲染，值不为真的时候就不渲染。

v-show：

template:
<div v-show="seen"></div>

data:
seen: true
seen: false

当值为真的时候就显示，值不为真的时候就隐藏，适用于经常来回切换的节点。
v-bind：
v-bind这个指令可以接受一个参数，在指令之后用冒号表示。
v-bind可以用于响应式的的更新html的属性。
v-bind可以简写为：：

<a v-bind:href="url">...</a>
<a :href="url">...</a>
//此处href使参数，告知v-bind指令将该元素的href属性与url的值绑定

v-on：

用于监听DOM事件
v-on 可以简写成==@==

<button v-on:click="hit">点击</button>
<button @click="hit">点击</button>
hit() {
      console.log("点击了一下")
    }

v-if，v-else，v-else-if：

template:
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

data:
type: 'A'

v-for（数组）：

template:
<ul id="example-1">
  <li v-for="(item,index) in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

data:
data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }

v-for循环的时候必须要有key作为唯一标识符，有其他的不同的值就可以绑定这个值，如果没有就可以用index。
v-for="(item,index) in items" 这个顺序不可乱

v-for（对象）：

template:
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }