7、Vue_表单应用

Vue在表单上的应用

通常使用v-model指令，在表单控件元素上创建双向数据绑定
v-model会根据控件的类型，自动你选取正确的方式去更新元素

image.png

---

• v-model在input、textare元素中实现双向数据绑定

<template>
    <div>
        <p>input元素：{{msg1}}</p>
        <input v-model="msg1" placeholder="填写内容">

        <p>textarea元素：{{msg2}}</p>
        <input v-model="msg2" placeholder="填写内容">
    </div>

</template>

<script>
    export default {
        name: "model_one",
        data(){
            return {
                msg1:'',
                msg2:''
            }
        }
    }
</script>

<style scoped>

</style>

结果：

v-model1

---

• 单选按钮的双向绑定

<template>
    <div>
        <button @click="say('hi')">hi</button>
        <button v-on:click="say('vue')">vue</button>
    </div>

</template>

<script>
    export default {
        name: "one",
        methods:{
            say(msg){
                alert(msg)
            }
        }
    }
</script>

<style scoped>

</style>

结果：

v-model2

---

• 复选框的双向绑定
  如果选项是一个，则用逻辑值
  如果选项是多个，则用数组接收

<template>
    <div>
        <p>多个选项复选框：</p>
        <input type="checkbox" id="python" value="python" v-model="checkbox_value">
        <label for="python">python</label>
        <input type="checkbox" id="java" value="java" v-model="checkbox_value">
        <label for="java">java</label>
        <input type="checkbox" id="c++" value="c++" v-model="checkbox_value">
        <label for="c++">c++ </label>
        <br>
        <span>选择的值：{{checkbox_value}}</span>
        <br>
        <p>单个选项复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
    </div>
</template>

<script>
    export default {
        name: "model_three",
        data(){
            return{
                checked:false,
                checkbox_value:[]
            }
        }
    }
</script>

<style scoped>

</style>

结果：

v-model3

---

• 下拉列表的双向数据绑定

<template>
    <div>
        <select v-model="selected" name="url">
            <option value=""> 请选择 </option>
            <option value="www.baidu.com"> 百度 </option>
            <option value="www.google.com"> 谷歌 </option>
        </select>
        <br>
        选中的网站是：{{selected}}
    </div>

</template>

<script>
    export default {
        name: "model_four",
        data(){
            return{
                selected:''
            }
        }
    }
</script>

<style scoped>

</style>

结果：

v-model4.png

v-mode的修饰符

• .number
  自动把用户的输入值转成number类型，如果原值的转化结果是NaN则返回原值：<input v-model.number="age" type="number">
• .trim
  自动过滤用户输入值的首尾空格：<input v-model.trim="msg">
  -.laze
  默认情况下，v-model在input事件中同步输入框的键值对，不过我们可以添加这个修饰符，从而转变到指定的事件中进行同步，比如说change：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >