文章目录

一、插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue模板语法</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>

<body>
<div id="root">{{content}}</div>

<script>
    var vm = new Vue({
        el: '#root',
        template: "<div>{{content}}</div>",
        data: {
            content: 'hello world'
        }
    });
</script>
</body>
</html>

二、v-text 中不是字符串而是js表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue模板语法</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>

<body>
<div id="root">
    <div v-text="content"></div>
</div>

<script>
    var vm = new Vue({
        el: '#root',
        template: "<div>{{content}}</div>",
        data: {
            content: 'hello world'
        }
    });
</script>
</body>
</html>

三、v-html

不是字符串而是js表达值，在当内容是一个字符串时v-html和v-text、插值表达式效果一样，当显示的内容是html时，v-html解析html，显示html标签中的内容而不显示标签，v-text、插值表达式这两种则会全部显示，不解析！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue模板语法</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>

<body>
<div id="root">
    <div v-text="content"></div>
    <div v-html="content"></div>
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            content: '<div>hello world</div>'
        }
    });
</script>
</body>
</html>

四、js表达式，可以和字符串拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue模板语法</title>
    <!--引入vue.js库-->
    <script src="../vue.js"></script>
</head>

<body>
<div id="root">
    {{content + ' ly'}}
    <div v-text="content + ' ly'"></div>
    <div v-html="content + ' ly'"></div>
</div>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            content: 'hello'
        }
    });
</script>
</body>
</html>

五、源码链接