Vue 插值与表达式 - 木子才的博客

插值

使用“{{}}”，双大括号，将双向绑定的数据实时显示出来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{ book }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data : {
            book: '《近乎永恒的永世缘物语》'
        }
    })
</script>
</body>
</html>

通过任何方法修改数据 book，双大括号的内容都会被实时替换。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{ date }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data : {
            date: new Date()
        },
        mounted: function() {
            var _this = this;//声明一个变量指向 Vue 实例this，保证作用域一致
            this.timer = setInterval(function() {
                _this.date = new Date()//修改数据
            }, 1000)
        },
        beforeDestroy: function () {
            if (this.timer) {
                clearInterval(this.timer)//Vue实例销毁前，清除定时器
            }
        }
    })
</script>
</body>
</html>

v-html，输出HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <span v-html="link"></span>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            link: '<a href="#">这是一个连接</a>'
        }
    })
</script>
</body>
</html>

获得到的代码为：

<html><head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app"><span><a href="#">这是一个连接</a></span></div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            link: '<a href="#">这是一个连接</a>'
        }
    })
</script>

</body>
</html>

可以看到，link的内容将会被渲染为一个具有点击功能的a 标签，而不是纯文本。

v-pre，跳过编译

<span > {{ 这里的内容是不会被编译 }} </span>

上述代码，在编译后会变成

<!---->

若是想显示 {{}} 文本，而不是进行替换，可以使用 v-pre，会跳过这个元素和它的子元素的编译过程。

<span v-pre> {{ 这里的内容是不会被编译 }} </span>

上述代码，在编译后会变成

<span> {{ 这里的内容是不会被编译 }} </span>

简单运算

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{ number / 10 }}
    {{ isOK ? '确定' : '取消' }}
    {{ text.split(',').reverse().join(',') }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            number: 100,
            isOK: false,
            text: '123,456'
        }
    })
</script>
</body>
</html>

输出：

10 取消 456,123

PS：
Vue 只支持单个表达式，不支持语句和流控制。
在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，Math 和 Date。