v-model指令
双向数据绑定就是当数据设置给表单元素时，修改这个数据会修改表单元素的值， 修改表单元素的值同样也会修改这个数据
<body>
<div id="app">
<input type="text" v-model="name">
<p>{{name}}</p>
</div>
<script>
const vm={
data(){
return{
name:'hello world'
}
}
}
const app=Vue.createApp(vm)
app.mount('#app')
</script>
</body>
当我们删除这个‘world’时 ，数据同样会发生变化
v-model在表单上的应用
我们给单选框绑定时，它会对应上单选框的value值，如果绑定的值和value对应就会选中那个单选框
姓名:
<input type="text" v-model="username">
<br><br>
是否单身:
<input type="checkbox" v-model="IsSingle">
<br><br>
性别:
<input v-model='gender' type="radio" name="sex" value="1">男
<input v-model='gender' type="radio" name="sex" value="2">女
<br><br>
所在城市：
<select v-model="city">
<option value="10" >北京</option>
<option value="11" >上海</option>
<option value="12" >成都</option>
<option value="13" >南京</option>
</select>
</div>
</div>
<script>
const app=new Vue({
el:'.app',
data:{
username:'',
IsSingle:false,
gender:1,
city:12
},
})
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
