Vue指令指令大全

最新推荐文章于 2024-07-09 08:50:52 发布

霜如明月

最新推荐文章于 2024-07-09 08:50:52 发布

阅读量3.5k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/88996597

版权

本文详细介绍了Vue中常用的指令，包括v-text、v-html、v-pre、v-cloak、v-once、v-if/v-else/v-else-if、v-show、v-for、v-bind、v-model和v-on，以及它们的用途、用法和与其他指令的配合使用。通过这些指令，可以更好地控制Vue应用中的元素渲染和事件处理。

摘要由CSDN通过智能技术生成

1. v-text

v-text主要用来更新textContent，可以等同于JS的text属性。

<span v-text="msg"></span>

这两者等价：

<span>{
  {msg}}</span>

2. v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。

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

这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。

3. v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

<div id="app">
  <span v-pre>{
  {message}}</span> //这条语句不进行编译
  <span>{
  {message}}</span>
</div>

最终仅显示第二个span的内容

4. v-cloak

这个指令是用来保持在元素上直到关联实例结束时进行编译。

<div id="app" v-cloak>
  <div>
    {
  {message}}
  </div>
</div>
<script type="text/javascript">
  new Vue({
   el:'#app',
   data:{
    message:'hello world'
   }
  })
</script>

在页面加载时会闪烁，先显示:

<div>
  {
  {message}}
</div>

然后才会编译为：

<div>
  hello world!
</div>

5. v-once

v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

<span v-once>This will never change:{
  {msg}}</span> //单个元素
<div v-once>//有子元素
  <h1>comment</h1>
  <p>{
  {msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
  <li v-for="i in list">{
  {i}}</li>
</ul>