Vue.js 模板语法

插值

文本插值

<div id="app">  <p>{{ message }}</p></div>

Html

使用 v-html 指令用于输出 html 代码：

v-html 指令

<div id="app">    <div v-html="message"></div></div>    <script>new Vue({  el: '#app',  data: {    message: '<h1>菜鸟教程</h1>'  } })</script>

v-bind 指令

<div id="app">  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">  <br><br>  <div v-bind:class="{'class1': use}">    v-bind:class 指令  </div></div>    <script>new Vue({    el: '#app',  data:{      use: false  } });</script>