<body>
<div id="root">
//普通输入框
<input type="text" v-model='text'>
<h1>您输入的内容是:{{text}}</h1>
<br />
//单选框
<label>
<input type="radio" name="like" v-model='like' value="男">男
</label>
<label>
<input type="radio" name="like" v-model='like' value="女">女
</label>
<h1>爱好是:{{like}}</h1>
<br />
//多选框
<input type="checkbox" v-model='sex' value="男">男
<input type="checkbox" v-model='sex' value="女">女
<input type="checkbox" v-model='sex' value="未知">未知
<br />
<h1>性别是{{sex}}</h1>
//下拉框
<select name="city" id="" multiple v-model='select'>
<option v-for="item in city" :key="item">
{{ item }}
</option>
</select>
<br />
<h1>您选择的是{{select}}</h1>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#root',
data: {
text: '哈哈', //text框默认输入值
like: '男' //单选框默认选项
sex: ['女'], //多选框默认选项
city: ['成都', '重庆', '上海', '北京'], //下拉框选项
select:[] //下拉框选择结果
},
})
</script>
</body>
v-model双向绑定普通输入框 /单选框 /多选框 /下拉列表
最新推荐文章于 2024-04-16 20:18:08 发布