vue06-三种数据绑定方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012326462/article/details/82820823
<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="utf-8"/>
        <title>三种模板语法</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>{{name}}</div>
            <!-- 也是数据绑定的语法和{{}}一样 -->
            <div v-text="name"></div> 

            <div v-html="name"></div>

            <div>{{name + ' hot'}}</div>
            <div v-text="name+' hot'"></div> 
            <div v-html="name+ ' hot'"></div>
        </div>


        <script>
            //每个v-开头的,后面都可以去写js表达式,不仅仅是变量
            

            var app = new Vue({
                el:'#app', //vue实例处理哪个dom
                data:{   //定义数据
                    name:'<h1>hello world</h1>'
                }
            })
        </script>
    </body>
</html>

1.{{name}}  插值表达式

2.v-text 与{{}}一样

3.v-html 会解析html标签

vue每个属性都可以写js表达式,不仅仅时变量

因此可以这么写:

         <div>{{name + ' hot'}}</div>
            <div v-text="name+' hot'"></div> 
            <div v-html="name+ ' hot'"></div>

运行效果:

猜你喜欢

转载自blog.csdn.net/u012326462/article/details/82820823