v-model radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id ="vue">
<!--相同name才会导致互斥事件，只能选其1-->
<!--但是相同v-model-->
<label for="male">
<input id="male" type="radio" name="sex" value="男" v-model="sex">男
</label>
<label for="female">
<input id="female" type="radio" name="sex" value="女" v-model="sex">女
</label>
<h2>您选择的性别是： {{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#vue',
data:{
sex:''
}
});
</script>
</body>
</html>
checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<!--checkbox单选框-->
<label for="agree">
<input type="checkbox" id="agree" v-model="agree" name="agree">同意协议
</label>
<h2>您选择的是{{agree}}</h2>
<button :disabled="!agree">下一步</button>
<!--checkbox多选框-->
<br>
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="平球" v-model="hobbies">平球
<input type="checkbox" value="凹球" v-model="hobbies">凹球
<h2>您选择的爱好是：{{hobbies}}</h2>
<!--数据动态绑定-->
<label v-for="item in ss" :for="item">
<input type="checkbox" :value="item" v-model="hobbies">
</label>
<h2>您选择的爱好是：{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#vue',
data: {
agree: false,
hobbies:[],
ss:['篮球','足球','pingpang','ssssss']
}
});
</script>
</body>
</html>
select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<!--单选-->
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="桃子">桃子</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是：{{fruit}}</h2>
<!--多选-->
<br>
<select name="fruits" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="桃子">桃子</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>您选择的水果是：{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#vue',
data: {
message: '你好！华为',
fruit: '',
fruits: []
}
});
</script>
</body>
</html>
|