Vue表单与v-model

<template>
  <div>
    <div class="col">
      <input type="text" v-model="message" placeholder="请输入..."/> <br/>
      <p>输入的内容是: {{message}}</p>
    </div>

    <div class="col">
       <textarea v-model="text" placeholder="输入...."></textarea>
    </div>

    <!--
        使用v-model，表单控件显示的值只依赖所绑定的数据，不在关心初始化时的value属性，使用v-model时如果有中文输入法
        输入中文时一般没有选中词, Vue时不会更新数据的，当敲下汉字时才会触发更新。如果希望总时实时更新，可以用@input来代替v-model.
    -->
    <div class="col">
      <input type="text" @input="handleInput" placeholder="请输入..." />
      <p>输入的内容是：</p>
      <p style="white-space: pre">{{text}}</p>
    </div>

    <!-- 单选按钮 单独使用直接v-bind -->
    <div class="col">
      单独使用按钮:
      <input type="radio" :checked="picked" /><br>
      <p>您的性别是：{{picked}}</p>
    </div>

    <!-- 单选按钮, 如果是互斥选择的效果, 就需要使用v-model配合value来使用 -->
    <div class="col">
      <label>性别:</label>
      <input type="radio"  v-model="picked" value="女" id="sex"/> <label for="sex">女</label><br>
      <input type="radio"  v-model="picked" value="男" id="man" /> <label for="man">男</label><br>
      <p>您的性别是：{{picked}}</p>
    </div>

    <!-- 复选框 单独使用 v-model 绑定一个布尔类型的值 -->
    <div class="col">
      <label for="pwd">是否记住密码:</label>
      <input type="checkbox"  v-model="picked" id="pwd"/>
      <p>您的性别是：{{picked}}</p>
    </div>

    <!-- 复选框多选, 多个勾选都绑定到同一个数组类型的数据上 -->
    <div class="col">
      <input type="checkbox" v-model="checkedArray" value="小说" id="novel"/><label for="novel">HTML</label>
      <input type="checkbox" v-model="checkedArray" value="IT" id="it"/><label for="novel">IT</label>
      <input type="checkbox" v-model="checkedArray" value="美女" id="girl" /><label for="novel">美女</label>
      <p>请选择爱好：{{checkedArray}}</p>
    </div>

    <!--
        选择列表:(单选)
            option是备选项，如果含有value的值就会优先匹配value的值，如果没有就会直接匹配option的text,
     -->
    <div class="col">
      <select v-model="selected">
        <option>html</option>
        <option value="js">JavaScript</option>
        <option value="java">Java</option>
      </select>
      <p>您选择的项目是：{{selected}}</p>
    </div>

    <!--  选择列表(多选):
      给<select>添加multiple属性
    -->
    <div class="col">
      <select v-model="courses" multiple>
        <option value="Math">Math</option>
        <option value="English">English</option>
        <option value="Chinese">Chinese</option>
      </select>
      <p>您选择的课程是：{{courses}}</p>
    </div>

    <!--
       动态输出<option>
       虽然选择列表<select>控件可以很简单的完成下拉选择的需求,但在实际业务中反而不常用，因为样式依赖平台和浏览器，无法统一，也不太美观。
       功能受限，不支持搜索, 所以常见的解决方案是用div模拟一个类似的控件。
    -->
    <div>
      <select v-model="selectedGame" multiple>
         <option v-for="game in games" :value="game.value">
           {{game.text}}
         </option>
      </select>
      <p>您选择的项目是：{{selectedGame}}</p>
    </div>

    <!--
        绑定值, 单选、复选框、下拉列表在单独使用的模式下, v-model绑定的值是一个静态字符串或者布尔值, 但在业务中有时需要绑定一个动态的数据
        可以使用v-bind来实现
     -->
    <div>
        <input type="radio" v-model="picked" :value="value"/>
      <label>单选按钮</label>
      <P>{{picked}}</P>
    </div>

    <!-- 复选框 动态绑定值 -->
    <div>
      <input type="checkbox" v-model="toggle"
             :true-value="value1"
             :false-value="value2"
      />
      <label>复选按钮</label>
      <P>{{toggle}}</P>
    </div>

    <!--
        修饰符
        .lazy 在输入框时 v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy会转变为在change事件中同步,
        message并不是实时改变的，而是在失去焦点或者按回车的时候才会更新
     -->
    <input type="text" v-model.lazy="message" />
    <p>输入的内容：{{message}}</p>

    <!-- 使用修饰符.number 可以将输入转换为Number类型，否则虽然你输入的数字，但它的类型其实是String,在数字输入框时会比较有用 -->
    <input type="text" v-model.number="numberText"/>
    <p>输入的内容：{{ typeof numberText}}</p>

    <!-- 使用修饰符.trim 可以自动过滤输入的首尾空格 -->
    <input type="text" v-model.trim="trimText"/>
    <p>输入的内容：{{trimText}}</p>
    <p>内容长度：{{trimText.length}}</p>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: '',
      text: '',
      picked: true,
      value: '123',
      checkedArray: [],
      selected: '',
      courses: [],
      selectedGame: [],
      toggle: false,
      value: '教徒',
      value1: "秦时明月",
      value2: "大唐风月",
      numberText: '',
      trimText: '',
      games: [
        {value: 'CF', text: "穿越火线"},
        {value: 'LOL', text: "英雄联盟"},
        {value: 'NZ', text: "逆战"},
        {value: 'CS', text: "反恐精英"}
      ]
    }
  },
  methods: {
    handleInput: function (e) {
      this.text = e.target.value;
    }
  }
}
</script>

<style scoped>

  input[type=text] {
    width: 350px;
    height: 30px;
    padding-left: 15px;
  }

  textarea {
    width: 340px;
    height: 60px;
    padding: 15px;
  }

  input[type=radio] {
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
  }

   .col {
     width: 500px;
     margin: 0 auto;
   }
</style>