代码：

<!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>

【Vue】通过Vue操作表单元素（下拉框、选择框）等示例（图文+完整代码）相关推荐

uniapp实现下拉搜索选择框，app，h5可用
在通过uniapp做app开发的时候,有场景需要用到下拉选择框,但是使用的uview框架里的底部弹出的选择项形式产品又不满意...于是在uniapp插件市场上搜索了一番,最终发现了一款还可以的,主要 ...
下拉多选择框实现方式_非极大值抑制Non-Maximum Suppression（NMS）一文搞定理论+多平台实现...
这是独立于薰风读论文的投稿,作为目标检测模型的拓展阅读,目的是帮助读者详细了解一些模型细节的实现. 薰风说 Non-Maximum Suppression的翻译是非"极大值"抑制, ...
html鼠标经过自动下拉菜单,操作方法：在鼠标经过后使用纯CSS实现下拉菜单，并附有示例说明（代码）...
纯CSS实现鼠标移动到按钮上打开下拉菜单. CSS部分: .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font ...
java下拉菜单选择前弹提示框_javascript实现下拉提示选择框
本文介绍了select和sugget结合起来使用的例子,支持下拉的直接选择,也支持在下拉内容中输入过滤. 整体效果就是下面这样的: 1.首先需要引入如下文件这里要注意jquery要放在select2 ...
下拉多选择框实现方式_物体检测之旅（三）|设计选择，经验教训和物体检测的趋势...
作者:Jonathan Hui编译:ronghuaiyang 物体检测器,像基于区域的检测或者一阶段的检测器,从不同的起点起步,最后越来越相似,都是朝着更快更准的目的地在前进.事实上,有些性能的差距可 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
vue 下拉框筛选列表_vue下拉菜单选择输入框_带有下拉菜单的Vue搜索输入可提供更多过滤条件...
vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) Vue search input with dropdo ...
简单的单级下拉菜单实现
这里用纯CSS实现一个简单的单级下拉菜单,鼠标划过菜单标题时显示下拉菜单. 基本思路在菜单处于光标之下时显示菜单,其余时候隐藏.这个过程首先得想到 :hover 伪类来实现,但是直接的利用伪类还不行 ...
Java 表单提交下拉框_Java实现Layui的form表单动态绑定下拉框
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Java实现Layui的form表单动态绑定下拉框 [1]视图层爱好: 立即提交重置 $(function () { //[1]加载&初始化l ...
html 下拉图片列表,图片、表单、下拉选项
图片 src 图片的地址 alt 图片的代替性文字 title 鼠标悬浮时的提示性文字 usemap 定义客服端图像映射图像映射 title="下载"> shape 形状 ...

【Vue】通过Vue操作表单元素（下拉框、选择框）等示例（图文+完整代码）

二、checkbox下拉框的简单勾选实例

三、checked复选框打对勾的最合理用法（循环用法）

但是表现出一个表达式，最适用：

如：:checked="selected==1",打对勾

【Vue】通过Vue操作表单元素（下拉框、选择框）等示例（图文+完整代码）相关推荐

最新文章

热门文章