Vue样式绑定

（一）对class属性进行绑定

v-bind:class：在<style>标签内事先写好样式，再进行名称绑定

运行结果

在此案例中，样式绑定1的样式来自style中的style1，因为在return返回值中将istrue设置为true，则style1中的样式是可以显示在页面中，若将istrue设置为false，则style1中的样式不会显示在页面中；样式绑定2的样式来自style中的style2，将style2:true放在对象中，在行内中去使用对象

（二）对style属性进行绑定

v-bind:style：在实例中直接编写样式再进行绑定

运行结果

（二）双向数据绑定

 运行结果：

       在本例中，我们给“得到”和“修改”分别添加了点击事件，点击“得到”，则输入框中的内容会给到页面中显示，若点击“修改”，则页面中和输入框中都会显示“我给你改了-email”；得到双向数据绑定的关键在于给input标签设置的v-model.lazy.number.trim.sync="email"，这个指令的特点在于：

       v-model：可以起到数据监听和赋值，将数据进行绑定，若只使用v-model，则页面中的数据在输入框输入时，同时就改变了，不需要点击“得到”；

      .lazy：也是给表单元素添加事件监听，可以在点击“得到”时，可以将输入框中的数字传给页面中；

      .number：是将输入框中的值转为数字类型；

      .trim：过滤值前后的空格；

      .sync：实现组件间双向绑定的方式，用于在子组件中更新父组件中绑定的属性值；