在表单元素上使用v-model的注意事项

1、在textarea标签中使用

    <textarea v-model="name"></textarea>
    <p>{{name}}</p>

　　问题：

　　在data中的数据已经加上换行符 \n 了，但是页面渲染时并没有换行

　　解决：

　　　　给p标签添加样式 <p style="white-space:pre-line;">{{name}}</p>

　　效果：

　　　　

 

2、在绑定多个checkbox时需要将v-model绑定到同一个数组中

    <input type="checkbox" v-model="checkedNames" value="xiaoming" id="xiaoming">
    <label for="xiaoming">xiaoming</label>
    <input type="checkbox" v-model="checkedNames" value="xiaohong" id="xiaohong">
    <label for="xiaohong">xiaohong</label>
    <input type="checkbox" v-model="checkedNames" value="xiaohua" id="xiaohua">
    <label for="xiaohua">xiaohua</label>
    <p>选中的名字：{{checkedNames}}</p>

  data() {
    return {
      checkedNames: ['xiaoming']
    }
  }

 

3、在绑定多个radio时需要将v-model绑定到同一个值中

    <input type="radio" v-model="radioVal" value="小明" id="xiaoming">
    <label for="xiaoming">小明</label>
    <br>
    <input type="radio" v-model="radioVal" value="小红" id="xiaohong">
    <label for="xiaohong">小红</label>
    <br>
    <p>谁最帅：{{radioVal}}</p>

  data() {
    return {
      radioVal: '小明'
    }
  }

4、select选择器

    <select v-model="selected" multiple>
      <option disabled value="">请选择</option>
      <option value="小王">小王</option>
      <option value="小红">小红</option>
      <option value="小华">小华</option>
    </select>
    <span>已选择：{{selected}}</span>

  data() {
    return {
      selected: ''
    }
  }