vue v-model 单选 复选 下拉 表单

v-model 与 表单

表单控件在实际业务较为常见，比如单选、多选、下拉、输入框等，用它们可以完成数据的录入，校验，提交等。例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

使用v-model 后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性的值。

使用v-model 时如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果总希望实时更新，可以用@input 来替代v-model。

单选按钮

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为假时不选。

<div>
    <input type="radio" :checked="picked" />
</div>
<script>
export default {
  data() {
    return {
      picked: true,
    }
  } 
};
</script>

单选按钮在组合使用时实现互斥选择的效果，就需要v-model配合value来使用。

 <div>
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <label>{{item.name}}</label>
          <input type="radio" v-model="picked" :value="item.val" @click="inputFunc(item.val)" />
        </li>
      </ul>
    </div>
<script>
export default {
  data() {
    return {
      picked:"z", //默认显示赵高 v-model 和 value 的值一致是选中状态
      list: [
        { name: "秦始皇",val:"q"},
        { name: "赵高",val:"z"},
        { name: "徐福",val:"x"},
        { name: "蒙恬",val:"m"},
        { name: "李斯",val:"l"}
      ]
    };
  },
  methods: {
    inputFunc(i) {
      let str = this.list.find(item =>{
        return item.val == i;
      })
      console.log(str.name);
    }
  }
};
</script>

复选框

复选框也分单独使用和组合使用

复选框单独使用时，也是用v-model来绑定一个布尔值。

<div id="appckend">
    <input type="checkbox" v-model="checked">
    <label for="">{{checked}}</label>
</div>
<script>
export default {
  data() {
    return {
      checked: true
    }
  } 
};
</script>  

在勾选时，数据checked的值变为了true，label中渲染的内容也会更新。

复选框组合使用时，也是v-model配合value来使用。
多个勾选框都绑定到同一个数组类型的数据，value的值在数组中，就会选中这一项。这一过程是双向的，在勾选时，value的值也会自动push到这个数组中。

<div id="appckend">
   <ul>
      <li v-for="(item,index) in list" :key="index">
        <label>{{item.name}}</label>
        <input type="checkbox" v-model="checked" :value="item.val" @click="inputFunc(item.val)" />
      </li>
    </ul>
</div>
<script>
export default {
  data() {
    return {
      checked:[], //数组类型，复选框的值会 push 到里面
      list: [
        { name: "秦始皇",val:"q"},
        { name: "赵高",val:"z"},
        { name: "徐福",val:"x"},
        { name: "蒙恬",val:"m"},
        { name: "李斯",val:"l"}
      ]
    };
  },
  
};
</script>

选择列表 （下拉选择器）

单选方式：

<option>是备选项，如果含有value属性，v-model就会优先匹配value的值；如果没有就会直接匹配
<option>的text，比如选中第二项时，selected的值是js，而不是JavaScript。

<select v-model="selected">
  <option v-for="(item,index) in list" :key="index" v-text="item.name"> </option>
</select>

<script>
export default {
  data() {
    return {
      selected:"秦始皇",
      list: [
        { name: "秦始皇",val:"q"},
        { name: "赵高",val:"z"},
        { name: "徐福",val:"x"},
        { name: "蒙恬",val:"m"},
        { name: "李斯",val:"l"}
      ]
    };
  }
};
</script>

复选框

得不到的总是挂念，共朝夕的总是厌倦 —— 非凡主力