Vue 表单双向绑定

1.什么是双向数据绑定

   当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。也是vue.js的精髓之处了。

2.在表单中使用双向数据绑定

   使用v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。v-model本质上就是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将vue实例的数据做完数据来源。你应该通过javascript在组件的data选项中声明初始值。

3.上代码

输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   您输入的文本：<input type="text" v-model="message"> {{message}}
</div>

<!--引入vue.js 包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"创客未来"
        }
    });

</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    性别：
   <input type="radio" name="sex" value="男" v-model="checked"> 男
    <input type="radio" name="sex" value="女" v-model="checked"> 女
    <p>你选择了:{{checked}}</p>

</div>

<!--引入vue.js 包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            checked:''
        }
    });

</script>
</body>
</html>

下拉框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    下拉框：
    <select v-model="checked">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    你选择了：{{checked}}

</div>

<!--引入vue.js 包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            checked:''
        }
    });

</script>
</body>
</html>

 

posted @ 2021-01-22 18:08  创客未来  阅读(248)  评论(0)    收藏  举报