表单和v-model

基本用法

基础

• 使用v-model之后，表单控件显示的值只依赖于所绑定的数据，此时value属性无效，<textarea><textarea>之间的值也是无效。

<div id="app">
        <input type="text" v-model="message" placeholder="请输入...">
        <p>输入发内容是:{{message}}</p>
        <textarea name="" id="" cols="30" rows="10" v-model="message">hello</textarea>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: ""
            }
        })
    </script>

常见的选择按钮

单选按钮

• 用法

<!-- type表示控件类型 name相同的为同一组,提交后有sex="value" checked表示为选中状态-->
<input type="radio" name="sex" id="" value="" checked/>

• 单个的radio: 直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选

<div id="app">
        <input type="radio" :checked="picked" @click="picked = !picked">
        <label>单选按钮</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                picked: true
            }
        })
    </script>

• 一组radio:v-model和value组合使用，当二者值一致时被选中

<div id="app">
        <input type="radio" v-model="picked" value="html" id="html">
        <label for="html">html</label>
        <input type="radio" v-model="picked" value="css" id="css">
        <label for="css">css</label>
        <input type="radio" v-model="picked" value="js" id="js">
        <label for="js">js</label>
        <p>你的选择项目是：{{picked}}</p>
        <button @click="pick">选择</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                picked: "html"
            },
            methods: {
                pick: function () {
                    this.picked = "js";
                }
            }
        })
    </script>

复选按钮

• 用法

<input type="checkbox" name="" id="" checked value="" name=""/>

• 单个: 使用v-model绑定一个布尔值

 <div id="app">
        <input type="checkbox" v-model="checked" id="checked">
        <label for="checked">选择状态：{{checked}}</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                checked: false
            }
        })
    </script>

• 一组:也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中

 <div id="app">
        <input type="checkbox" v-model="checked" value="html" id="html">
        <label for="html">HTML</label>
        <br>
        <input type="checkbox" v-model="checked" value="css" id="css">
        <label for="css">CSS</label>
        <br>
        <input type="checkbox" v-model="checked" value="js" id="js">
        <label for="js">js</label>
        <br>
        <p>选择的项是： {{checked}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                checked: ["html", "css"]
            }
        })
    </script>

绑定值

v-model在按钮被选中后会更新为其:绑定的值

• 单选按钮

 <div id="app">
        <input type="radio" v-model="picked" :value="value">
        <label>单选按钮</label>
        <p>{{picked}}</p>
        <p>{{value}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                picked: false,
                value: 123
            }
        })
    </script>

• 多选按钮

<div id="app">
        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
        <p>{{toggle}}</p>
        <p>{{value1}}</p>
        <p>{{value2}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                toggle: false,
                value1: 'a',
                value2: 'b'
            }
        })
    </script>

• 下拉选择按钮

<div id="app">
        <select name="" id="" v-model="selected">
            <option :value="number">123</option>
        </select>
        <p>{{selected}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                selected: "",
                number: 1234
            }
        })
    </script>

修饰符

v-modle.lazy="message"

• .lazy: message并不是实时改变的，而是在失焦或按回车时才更新。
• .number: 可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型其实是String
• .trim: 可以自动过滤输入的首尾空格