Vue 对象的改变会直接影响到 HTML 的标签的变化,而且标签的变化也会反过来影响 Vue 对象的属性的变化

# 一、数据渲染
<div>{message} </div><!--数据绑定-->
<div v-html="htmlMess"></div> <!--html绑定-->
<div v-text="message"></div> <!--数据绑定-->
@前端进阶之旅: 代码已经复制到剪贴板
# 二、属性绑定
<h1 v-bind:title="message">aaa</h1> <!--属性绑定-->
<a v-bind:href="url">百度</a> <!--属性绑定-->
<a :href="url">百度</a> <!--简写-->
@前端进阶之旅: 代码已经复制到剪贴板
# 三、类名绑定
<!--类绑定,当isActive为true时类名生效-->
<div v-bind:class="active : isActive"></div>
<!--多类名绑定,用逗号隔开-->
<div v-bind:class="active:isActive,red:isRed"></div>
<!--对象类名绑定-->
<div v-bind:class="classObj"></div>
<!--类名数组绑定-->
<div v-bind:class="[active,red]"></div>
<!--三元运算符类名绑定-->
<div v-bind:class="isActive ? active : red">