1-4 表单

一、checkbox为多选时

checkbox为多选的时候,v-model的值设置为数组

   <div id="app">
        <h2>爱好</h2>
        <div>
            <input type="checkbox" value="足球" v-model="likes">足球
            <input type="checkbox" value="篮球" v-model="likes">篮球
            <input type="checkbox" value="台球" v-model="likes">台球
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                likes:[]            }
        })
    </script>

二、radio

  <div id="app">
        <h2>性别</h2>
        <div>
            <input type="radio" id="one" value="boy" v-model="sex">男
            <input type="radio" id="one" value="girl" v-model="sex">女
        </div>
        {{sex}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                sex: ""
            }
        })
    </script>

三、选择框

   <div id="app">
        <h2>城市</h2>
        <select v-model="city">
            <option disabled value="">请选择</option>
            <option>武汉市</option>
            <option>荆州市</option>
            <option>长沙市</option>
        </select>
        {{city}}
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                city: ""
            }
        })
    </script>

3-1 多选

<select v-model="city" multiple>
            <option disabled value="">请选择</option>
            <option>武汉市</option>
            <option>荆州市</option>
            <option>长沙市</option>
</select>

四、.number

//让输入框的类型为数值型
<input v-model.number="age" type="number">

五、[trim](https://cn.vuejs.org/v2/guide/forms.html#trim)

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

六、checkbox和change事件

checkbox执行点击事件时用change事件取代,这样能保证视图和数据同步

   <div id="app">
        <input type="checkbox" v-model="keyword" @change="change">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                keyword:false
            },
            methods:{
                change(){
                    console.log(this.keyword)
                }
            }
        })
    </script>

七、练习

1.实现一个todoList
2.vue-cli实现todoList
3.element-ui实现todoList