Vue常用的指令有哪些-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Vue常用的指令有哪些

这篇文章给大家分享的是有关Vue常用的指令有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司拥有十多年成都网站建设工作经验,为各大企业提供成都做网站、网站制作服务，对于网页设计、PC网站建设（电脑版网站建设）、成都app开发、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、域名注册等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

1. v-text

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

这两者等价：

{{msg}}

2. v-html

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

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

3. v-pre

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


  {{message}} //这条语句不进行编译
  {{message}}

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

4. v-cloak

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


  
    {{message}}

new Vue({ el:'#app', data:{ message:'hello world' } })

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


  {{message}}

然后才会编译为：


  hello world!

5. v-once

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

This will never change:{{msg}} //单个元素
//有子元素
  comment
  {{msg}}

//组件

上面的例子中，msg,list即使产生改变，也不会重新渲染。

6. v-if

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

yes

如果属性值ok为true，则显示。否则，不会渲染这个元素。

7. v-else

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

yes
No

8. v-else-if

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

Not A,B,C

9. v-show

hello world

也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

10. v-for

用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式

{{parent}}-{{item.text}} var example = new Vue({ el:'#app', data:{ parent:'父作用域' items:[ {text:'文本1'}, {text:'文本2'} ] } })

12345

hello {{somebody}}

新闻中心

comment

其他资讯