v-bind和v-model详解

1 v-bind

v-bind绑定属性：:属性名 => v-bind:属性名

绑定class

数组：:class="[active, line]"

对象：:class="{active: isActive , line: isLine}"

绑定style

:style="{color: fontColor}"  （样式名：样式值）

data: {

    fontColor:‘black‘

}

2 v-model

    v-model的双向绑定原理：通过v-bind将model数据绑定进页面，然后又通过v-on绑定事件来监听页面的变化，并将变化了的数据重新绑定进model数据中。

v-model对表单的绑定：

单选框：

<label for="male">
  <input type="radio" id="male" v-model="sex" value="男">男
</label>
-性别为{{sex}}-
<label for="female">
  <input type="radio" id="female" v-model="sex" value="女">女
</label>

sex:‘男‘,//单选框绑定v-model 选中|不选中 对应 绑定的值 是|不是 对应的value

多选框(单个):

<label for="agree">
  <input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
{{isAgree}}
<button :disabled="!isAgree">下一步</button>

isAgree:false,//单个多选框对应是布尔值 （即v-mode绑定的不是数组时，选中|不选中对应true|false）

多选框(多个):

<input type="checkbox" id="basketball" v-model="hobbies" value="篮球">篮球
<input type="checkbox" id="baseball" v-model="hobbies" value="棒球">棒球
<input type="checkbox" id="deskball" v-model="hobbies" value="桌球">桌球
爱好是{{hobbies}}

hobbies:[],//多个多选框对应的是数组 （v-model绑定的是数组时，选中|不选中对应的是向数组加入value|不加入value）

选项卡（单选）：

<select name="singleSelect" v-model="fruit">
  <option value="苹果">苹果</option>
  <option value="香蕉">香蕉</option>
  <option value="西瓜">西瓜</option>
</select>
单选水果为：{{fruit}}

fruit:‘香蕉‘,//选项卡单选，与单选框类似只能选单个 对应类型为str

选项卡（多选）：

<select name="multipleSelect" v-model="fruits" multiple>
  <option value="苹果">苹果</option>
  <option value="香蕉">香蕉</option>
  <option value="西瓜">西瓜</option>
</select>
多选水果为：{{fruits}}

fruits:[],//选项卡多选，与多个多选框类似能选多个 对应类型为数组

  实际开发中应用的v-model值绑定（从服务器请求的value）：

<!--从服务器取得数据并渲染页面，选中的选项信息保存于List中-->
<label v-for="item in originalList" :for="item.id">
  <input :id="item.id" type="checkbox"  v-model="List" :value="item">{{item.value}}
</label>
{{List}}

originalList:[{id:1,value:‘大西瓜‘},{id:2,value:‘小苹果‘},{id:3,value:‘臭榴莲‘}],//从服务器取得的数据
List:[],//选中的选项的数据存放地 与v-model绑定

v-model事件修饰符：

1 v-model.lazy 只有按下enter或者失去光标时才会响应式更新数据
2 v-model.number 在输入框中无论输入什么都会被默认转化成string类型，用这个修饰符后number类型不会被转化
3 v-model.trim 如果输入的内容首尾有空格，则会自动去除空格

v-bind和v-model详解

原文：https://www.cnblogs.com/chujunqiao/p/11624232.html