v-bind和v-model详解

Posted 2022-12-24 chujunqiao

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 如果输入的内容首尾有空格，则会自动去除空格