Vue 2 | Part 3 常用指令合集

本期跟大家分享的，是Vue里面除了v-bind和v-on之外的指令。因为都挺简单的，所以就一次性解决了。

v-text

直接把文字绑定到html。之前我们一直使用大胡子语法往html里面绑定数据，如果数据是纯字符串的话，也可以使用v-text。

当然也可以绑定其它类型的数据，它们会以字符串的输出。

v-html

相当于jq的html方法，把数据中的html字符串嵌入到目标元素里面。

注意v-text和v-html两者，往html里插入数据以后新数据和使用指令的元素

之间的层级关系。

v-if/v-else-if/v-else

我会把这三兄弟描述为：在html中进行状态控制的快捷指令。

下面用一个简单的例子来演示。假设我们的数据中status可能会返回loading、ready、fail三者之一，在页面需要根据这个字段来显示不同的东西：

    

        
loading
    
    

        
ready
    
    

        
fail
    

在console中直接改变status值，可以看到效果：

同时要留意，使用这三兄弟的时候，vue只会生成判定为true的那个节点：

v-show

根据布尔值决定目标元素的css display值。

    
{{ info }}

修改showHeader的值

> app.showHeader = false

可以看到元素中增加了css style，原来的文字也被隐藏了：

当然showHeader也可以赋值为其它东西，但是最后都会转换为布尔值来决定目标元素是否显示。

v-show和v-if的区别

打开chrome devtools来查看两者渲染出来的dom。可以看到v-show只改变元素的css，但是v-if会决定是否生成这个dom节点（可查看上方截图）。

v-once

只根据数据渲染一次。往后数据改变时，目标元素不再重新渲染。

我们用v-text和v-once进行对比：

    
v-once: {{ once }}
    
mustache: {{ once }}

保存代码并刷新浏览器后，两句话是一样的：

对数据中的once值进行修改后，使用v-once的元素不更新：

这期就到这里，敬请期待下一期：v-bind绑定属性和class。

写在最后

源码地址：https://github.com/levblanc/v...

视频攻略：小的不才，为求一赞，自制 本期视频攻略 在此。