vue 官方文档 v-model 表单输入绑定 学习笔记

简述

通过官方例子练习，学习如下知识点：

• 文本框数据绑定
• 多行文本
• 单选框
• 复选框
• 下拉选择框
• 事件修饰符
  • lazy
  • number
  • trim

练习代码

<template>
  <div class="about">
    <h1>表单输入绑定</h1>
    <h3>单行文本</h3>
    <input v-model="message" placeholder="edit me">
    <p>message is {{message}}</p>
    <h3>多行文本</h3>
    <span>Multiline message is : </span>
    <p style="white-space:pre-line">{{multiMessage}}</p>
    <br>
    <textarea v-model="multiMessage" placeholder="edit multiline message"></textarea>
    <h3>复选框</h3>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox"> {{checked}}</label>
    <h3>多个复选框</h3>
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <label for="jack">jack</label> 
    <input type="checkbox" id="John" value="John" v-model="checkedNames">
    <label for="John">John</label>
    <div>checkedNames:{{checkedNames}}</div>
    <h3>单选框</h3>
    <input type="radio" id="one" value="one" v-model="picked">
    <label for="one">one</label>
    <input type="radio" id="two" value="two" v-model="picked">
    <label for="two">two</label>
    <div>picked:{{picked}}</div>
    <h3>选择框</h3>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

    <h3>多选择框</h3>
    <select v-model="multiSelected" multiple>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <div>selected:{{multiSelected}}</div>

    <h3>v-for渲染选择框</h3>
    <select v-model="forSelected">
      <option v-for="option in options" :key="option.value" :value="option.value">{{option.text}}</option>
    </select>
    <span>slected:forSelected</span>
    <hr>
    <h2>值绑定</h2>
    <h3>复选框值绑定</h3>
    <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
    <span>{{toggle}}</span>
    <h3>值绑定</h3>
    <input type="radio" v-model="pick" :value="a">
    <span>选中后的值 {{pick}} </span>
    <h3>选择框</h3>
    <select v-model="selected">
      <option v-bind:value="{number:123}">123</option>
    </select>
    <hr>
    <h2>修饰符</h2>
    <h3>lazy:只有切换后改变绑定变量的值</h3>
    <input v-model.lazy="msg">
    <h3>number:转化为数值型</h3>
    <input v-model.number="age" type="number">
    <h3>trim：过滤空行</h3>
    <input v-model.trim="msg">
  </div>
</template>
<script>
export default {
  data() {
    return {
      message:'',
      multiMessage:'',
      checked:false,
      checkedNames:[],
      picked:'one',
      selected:'',
      multiSelected:[],
      forSelected:'',
      options:[
        {text:'one',value:'A'},
        {text:'two',value:'B'},
        {text:'three',value:'C'},
      ],
      toggle:'',
      pick:'',
      a:'radio',
      msg:'',
      age:0
    };
  },
  methods:{
   
  }
};
</script>