Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
</head>
<style>
/* select {
width: 200px;
height: 30px;
font-size: 16px;
} */
select {
/* styling */
background-color: white;
border: thin solid rgb(199, 199, 199);
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
/* reset */
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
select.minimal {
background-image:
linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px),
calc(100% - 2.5em) 0.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="vue.js"></script>
<body>
<div id="box">
<div>
【静态radio】 ==== 判断题 ====
<p>
1、感冒需要喝药（判断题）:
<p>
<input type="radio" v-model="radioValue" value="1">正确
<input type="radio" v-model="radioValue" value="2">错误
<p>
【动态radio】 ==== 单选题 ====
<p>
1、中国的首都城市是:
<p>
<div v-for="p in listRadio">
<!-- 注意：只有一组name都是同一个值，才是单选 -->
<!-- 注意：当v-model=value，就会被选中 -->
<input type="radio" :value="p.ID" v-model="p.IsValue" :name="groupId" @click="mClick(p.ID)">
<label>{
{p.Title}}</label>
</div>
</div>
<div>
<p>
-----------------------------------------------------
<p>
【静态1：checkbox】 ==== 多选题 ====
<p>
<!-- 注意：v-model中的checked为数组，value的值是谁为选中 -->
于大爷爱好:
<input type="checkbox" v-model="checked" value="1">抽烟
<input type="checkbox" v-model="checked" value="2">喝酒
<input type="checkbox" v-model="checked" value="3">烫头
<input type="checkbox" v-model="checked" value="4">遛狗
<br><br>
<p>
【静态2：checkbox】 ==== 多选题 ====
<p>
<!-- 注意：v-model中的checkTrue为选中，checkFalse为不选中 -->
于大爷爱好:
<input type="checkbox" v-model="checkTrue" value="1">抽烟
<input type="checkbox" v-model="checkFalse" value="2">喝酒
<input type="checkbox" v-model="checkFalse" value="3">烫头
<input type="checkbox" v-model="checkTrue" value="4">遛狗
<br><br>
【动态checkbox】 ==== 多选题 ====
<p>
<div class="answer" v-for="s in listCheck" :key="s.ID">
<input type="checkbox" :value="s.ID" v-model="s.IsCorrect==1" @click="mClick(s.ID,s.IsCorrect)">
<label>{
{s.Title}}</label>
</div>
<p>
-----------------------------------------------------
<p>
【动态select】 ==== 下拉框 ====
<div>
<select class="minimal" v-model="classSelected" @change="change">
<option :value="a.id" v-for="a in classList">
{
{a.name}}
</option>
</select>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var box = new Vue({
el: "#box",
data: {
radioValue: "2", // 值=Value名称为选中状态
groupId: "888", // 组号
listRadio: [{
"ID": 10190,
"Title": "北京",
"IsValue": ""
},
{
"ID": 10191,
"Title": "上海",
"IsValue": "10191"
},
{
"ID": 10192,
"Title": "广州",
"IsValue": ""
}
],
checked: ['1', '3'],
checkTrue: 1, // 选中
checkFalse: 0, // 不选中
listCheck: [{
"ID": 10190,
"Title": "北京",
"IsValue": "",
"IsCorrect": "1"
},
{
"ID": 10191,
"Title": "上海",
"IsValue": "10191",
"IsCorrect": "0"
},
{
"ID": 10192,
"Title": "广州",
"IsValue": "",
"IsCorrect": "1"
}
],
classList: [{
id: "0",
name: "全部分类"
},
{
id: "1",
name: "类别A"
},
{
id: "2",
name: "类别B"
},
{
id: "3",
name: "类别C"
},
],
// 后台更新classList，默认选中：0-全部分类
classSelected: 0
},
methods: {
mClick(s, b) {
alert("Id=" + s + " 组ID：this.groupId");
alert("点击前的状态" + b);
},
change() {
alert(this.classSelected);
}
}
})
</script>
</html>