Vue插值
先引用Vue
<script src="https://unpkg.com/vue/dist/vue.js"></script>
文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
<body> <div id="app"> <h1>{{message}}</h1> </div> <script type="text/javascript"> window.onload = function () { new Vue({ el: "#app" , data: { message:"小可爱" } }); } </script> </body>
HTML
使用 v-html 指令用于输出 html 代码：
<body> <div id="app"> <div v-html="message"></div> </div> <script type="text/javascript"> window.onload = function () { new Vue({ el: "#app" , data: { message:"<h1>超级小可爱</h1>" } }); } </script> </body>
属性
HTML 属性中的值应使用 v-bind 指令。
<head> <style type="text/css"> .class1 { width:200px; height:300px; background-color:red; } </style> </head> <body> <div id="app"> <p v-bind:class="{class1:color}">小可爱</p> <!--v-bind缩写<p :class="{class1:color}">小可爱</p>--></div> <script type="text/javascript"> window.onload = function () { new Vue({ el: "#app" , data: { color:true//为true时显示class1样式，为false时不显示 } }); } </script> </body>