Vue学习（三）：数据绑定语法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定语法</title>
</head>
<body>
<!--1.插值-->
<!--文本插值-->
<h3 id="example1">{{ message }}</h3>
<!--文本单次插值（当数据改变时，插值处的内容不会继续更新）-->
<h3 id="example2" v-once>{{ message }}</h3>
<!--原始的 HTML 插值-->
<div id="example3" v-html="htmlValue"></div>

<!--2.JavaScript 表达式-->
<div id="example4">
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
</div>

<script type="text/javascript" src="vue.min.js"></script>
<script>
    // example 1
    let vm1 = new Vue({
        el: '#example1',
        data: {
            message: 'Hello Vue.'
        }
    });

    // example 2
    let vm2 = new Vue({
        el: '#example2',
        data: {
            message: 'Hello Vue.'
        }
    });
    // 改变`message`, 发现不能改变
    vm2.message = 'Hello Vue World.';

    // example 3
    let vm3 = new Vue({
        el: '#example3',
        data: {
            htmlValue: '<h2>Hello Vue.</h2>'
        }
    });

    // example 4
    let vm4 = new Vue({
        el: '#example4',
        data: {
            number: 5,
            ok: true,
            message: 'Hello Vue.'
        }
    });
</script>
</body>
</html>

结果：

 

posted @ 2018-12-11 11:28  寒爵  阅读(161)  评论(0)  编辑  收藏  举报