vue基础

1.文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

<div id="app">

<p>{{ message }}</p>

</div>

2.Html

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

<div id="app">

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

</div>

<script>

new Vue({

         el: '#app',

        data: { message: '<h1>菜鸟教程</h1>'

}

})

</script>

3.属性

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

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>