初识 Vue（08）---(模板语法)_差值表达式怎么写-CSDN博客

本文链接：https://blog.csdn.net/jianghao233/article/details/81211458

模板语法

1.差值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        {{name}}
        </div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                name:'Dell'
            },
       })  
    </script>   
</body>
</html>

差值表达式就是格式如 {{ }}

输出：

2.v-text

换一种写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
       <div v-text="name"></div>
        </div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                name:'Dell'
            },
       })  
    </script>   
</body>
</html>

输出：

3.v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='app'>
        {{name}}
       <div v-text="name"></div>
       <div v-html="name"></div>
        </div>
    <script>
       var vm = new Vue({
            el:'#app',
            data:{
                name:'<h1>Dell</h1>'
            },
       })  
    </script>   
</body>
</html>

输出：