v-model与表单

作者: 慵懒的阳光丶 | 来源:发表于2019-05-07 15:37 被阅读0次

《Vue.js 实战》基础篇（下）
Vue学习笔记(10)-数据双向绑定
Vue.js教程_7
与Vue.js的第二天
Vue——v-model指令 & 事件处理 & 深度响应式
学习Vue（表单）
7、Vue_表单应用
vue第二天总结
表单与 v-model
表单与v-model

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue.js提供了 v-model 指令，用于在表单类元素上双向绑定数据

直接上示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" name="" id="" v-bind="message">
        <p>{{message}}</p>

        <!-- 一个单选框 可以用v-bind/:绑定的方式来设置选中状态-->
        <input type="radio" name="" id="single" :checked="pick"> 
        <label for="single">单选按钮</label>
        <br>
        <!-- 多个单选框 通过v-model的方式设置选中状态，当v-model的值和input中value的值相等时会选中-->
        <input type="radio" name="" id="js" value="js" v-model="picked">
        <label for="js">js</label>
        <input type="radio" name="" id="html" value="html" v-model="picked">
        <label for="html">html</label>
        <input type="radio" name="" id="java" value="java" v-model="picked">
        <label for="java">java</label>
        <br>
        <!-- 一个复选框 -->
        <input type="checkbox" name="" id="ygfx" v-model="pick">
        <label for="ygfx">一个复选框</label>
        <br>
        <!-- 多个复选框 -->
        <input type="checkbox" name="" id="php" v-model="picks" value="php">
        <label for="php">php</label>
        <input type="checkbox" name="" id="python"  v-model="picks" value="python">
        <label for="python">python</label>
        <input type="checkbox" name="" id="css"  v-model="picks" value="css">
        <label for="css">css</label>

        <br>
        <!-- 下拉选 <option>是备选项，如果含有 value 属性， v-model 就会优先匹配 value 的值： 如果没有， 就会 直接匹配＜option＞的 text -->
        <!-- 给<selected>添加属性 multiple 就可以多选了， 此时 v-model 绑定的是一个数组， 与复选框用 法类似 -->
        <select name="" id="" v-model="picks" >
            <option>html</option>
            <option>js</option>
            <option>php</option>
        </select>
        <br>
        <!-- v-model修饰符 -->
        <input type="text" name="" id="" v-model.lazy="picked">
        <p>{{picked}}</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                message: '',
                pick: true,
                picked: 'js',
                picks:['css','php']
            }

        })

    </script>
</body>

</html>