VUE-03-双向绑定
Vue.js是一个MVVM框架,数据的双向绑定,我们已经体会到了数据变化,视图随之变化,但视图变化,数据变化体会不多,这里体验一下
明确:数据的双向绑定,针对UI控件,非UI控件不会涉及到数据双向绑定,单向数据绑定是使用状态管理工具的前提,如果使用vuex
,那么数据流也是单向的,这时就会和双向数据绑定存在冲突
在表单中使用双向数据绑定
v-model指令:在表单<input>``<textarea>``<select>
元素上创建双向数据绑定.会根据控件类型自动选取正确的方法来更新元素,本质是语法糖,负责监听用户的输入事件以更新数据
注意:v-model 会忽略所有表单元素的value,checked,selected特性的初始值,而总是将Vue实例的数据作为数据来源,所以应该通过JavaScript在组件的data选项中声名初始值
<body>
<div id="app">
输入的文本: <input type="text" v-model="message"> {{message}}
<hr>
性别
<input type="radio" name="sex" value="男" v-model="gender">男
<input type="radio" name="sex" value="女" v-model="gender">女
<p>选中了{{gender}}</p>
<hr>
下拉框
<select v-model="selected">
<option value="">---请选择---</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>选中了{{selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message: "123",
gender: '',
selected: ''
}
});
</script>
</body>