CSDN专家-赖老师（软件之家）
CSDN专家-赖老师（软件之家）

第7讲：v-bind属性绑定,v-model双向绑定,v-on事件监听使用

目录

1.v-bind双向绑定
2.v-model双向绑定
3.v-on事件绑定

一.v-bind双向绑定

1.v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），Vue官方提供了一个简写方式 :bind，例如：
2.v-bind  主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

示例











代码示例1

代码示例2

3.绑定 HTML Class

我们可以传给 v-bind:class 一个对象，以动态地切换 class

对象语法


    你好

数组语法


    v-bind

绑定内联样式

 v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名： 

测试

直接绑定到一个样式对象通常更好，这会让模板更清晰


    
测试效果

二.v-model双向绑定

v-model一般用于数据的双向绑定（表单元素设置了之后会忽略掉value，checked，selected），常用在表单 及