Vue中数据绑定v-bind与v-model

目录

1.v-bind单向绑定

1.1 常用属性绑定

1.2 class绑定

1.3 style绑定

2.v-model双向绑定

2.1 普通表单元素绑定

2.2 特殊表单元素绑定

---

1.v-bind单向绑定

vibind 可以用来动态地绑定一个标签的属性

语法 : v-bind : 标签属性

简写  : 标签属性

1.1 常用属性绑定

   跳转到百度

 跳转到百度

1.2 class绑定

v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1. 字符串写法

​



    
文本内容




​

2. 数组写法

 以下案例同时添加了两个类名

    
文本内容

3. 对象写法

 以下案例,两个类名可以根据动态数据的值,看是否应用

    
文本内容

 1.3 style绑定

1. 对象语法

注意:对象中的属性必须是样式属性,也就是设置css样式存在的属性,如果是两个单词,则使用驼峰命名

 以下对象写法更简单

2.数组写法

 示例代码如下:

    
文本内容

详情参考官网

Class 与 Style 绑定 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F 

2.v-model双向绑定

v-model一般用来绑定表单元素,v-model本质上不过是语法糖。

v-model的原理:

  v-bind绑定value属性的值；
  v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

2.1 普通表单元素绑定

文本框: input 和 textarea

此时的 v-model默认收集的是标签的value值

    

        
        
{{message}}
    

    

2.2 特殊表单元素绑定

1. 单选框

单选框使用v-model数据绑定时,标签必须配置value属性,否则v-model收集到的数据始终是null

    

        男
       女
    

    

2. 多选框

同一组中有多个选框,每一个多选框都需要配置value属性,并且v-model绑定的数据需要是一个数组,否则勾选一个,则剩余选框也会勾选,一个取消勾选,则全部取消勾选

    吃饭
     睡觉
     打豆豆

3. select下拉选框

注意: option中也需要配置value值

    
        请选择城市
        北京
        上海
        深圳
    

关于v-model想了解更多,可以参考官网

表单输入绑定 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/forms.html