代码:
<!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>
二、checkbox下拉框的简单勾选实例
1、html
<span class="checkbox_span">
<input type="checkbox" class="Checkbox" id="check3">
<label for="check3" class="checkbox_label"></label>
</span>
2、css
<link rel="stylesheet" href="css/CheckBox.css">
/* 圆圈样式 */
.Checkbox+.checkbox_label {
width: 23px;
height: 23px;
}
/* 对勾样式 */
.Checkbox:checked+.checkbox_label:after {
left: -1px;
top: -1px;
width: 25px;
height: 25px;
font-weight:900;
font-size: 16px;
line-height: 25px;
}
三、checked复选框打对勾的最合理用法(循环用法)
主要用到的是::checked="true" 选中打对勾,:checked=“flase”取消对勾
但是表现出一个表达式,最适用:
如::checked="selected==1",打对勾
<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>复选框实例</title>
<script src="js/vue/vue.js"></script>
</head>
<link rel="stylesheet" href="css/CheckBox.css">
<style>
* {
margin: 0;
padding: 0;
}
</style>
<body>
<div id="app">
<span v-for="todoObj in todos" class="checkbox_span">
<input type="checkbox" :checked="todoObj.selected==1" :id="todoObj.id" />{{todoObj.title}} <br>
</span>
</div>
</body>
<!-- 选中效果 -->
<script>
var app = new Vue({
el: "#app",
data: {
todos: [
{ id: "001", title: "抽烟", selected: "1" },
{ id: "002", title: "喝酒", selected: "0" },
{ id: "003", title: "烫头", selected: "1" },
],
},
})
</script>