Vue 2 | Part 3 常用指令合集

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

v-text

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

<div id="app">
    <h1 v-text="info"></h1>
</div>

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

v-html

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

<div id="app">
    <h1 v-html="html"></h1>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            html: '<small>使用v-html渲染</small>'
        }
    });
</script>

注意v-text和v-html两者，往html里插入数据以后新数据<small>和使用指令的元素<h1>之间的层级关系。

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

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

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

<div id="app">
    <div v-if="status === 'loading'">
        <div class="alert alert-info">loading</div>
    </div>
    <div v-else-if="status === 'ready'">
        <div class="alert alert-success">ready</div>
    </div>
    <div v-else>
        <div class="alert alert-danger">fail</div>
    </div>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            status: 'loading'
        }
    });
</script>

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

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

v-show

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

<div id="app">
    <h1 v-show="showHeader">{{ info }}</h1>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            info: 'hello hacker cafe',
            showHeader: true
        }
    });
</script>

修改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进行对比：

<div id="app">
    <div class="alert alert-danger" v-once>v-once: {{ once }}</div>
    <div class="alert alert-info">mustache: {{ once }}</div>
</div>

<!-- ... ... -->

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            once: '遵命主人，只渲染一次'
        }
    });
</script>

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

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

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

写在最后

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

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