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...

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