Vue表单用法

最新推荐文章于 2024-05-09 23:33:38 发布

友人C君~

最新推荐文章于 2024-05-09 23:33:38 发布

阅读量346

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/CWH0908/article/details/86505719

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue框架学习_复选框...</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.css" />				
	</head>
	<body>
		
		<div id="div1">
			单个复选框选择
			<br />
			<input type="checkbox" id="currentCheck" v-model="checkOne" />
			<label for="currentCheck">{{checkOne}}</label>
			<hr />
			
			多个复选框选择<br />			
			checkedNames双向数据绑定，当选择全选时，已将checkedNames数组赋值为所有数据，此时别的复选框绑定的checkedNames的，自动更新吗，存在数据即选中状态<br />
			<input id="allCheckbox" type="checkbox" v-model="checked" v-on:click="change()"/><label for="allCheckbox">全选:{{checked}}</label><br />
			<input type="checkbox" value="复选框1" v-model="checkedNames" />复选框1
			<input type="checkbox" value="复选框2" v-model="checkedNames" />复选框1
			<input type="checkbox" value="复选框3" v-model="checkedNames" />复选框3
			选中的复选框有：{{checkedNames}}
			<hr />
			
			单选框选择
			<br />
			<input type="radio" value="A" id="radio1" v-model="radioNames" /><label for="radio1">A</label><br />
			<input type="radio" value="B" id="radio2" v-model="radioNames" /><label for="radio2">B</label><br />
			<input type="radio" value="C" v-bind:id="['radio3']" v-model="radioNames" /><label for="radio3">C</label><br />
			<input type="radio" value="D" v-bind:id="R" v-model="radioNames" /><label for="radio4">D</label>		<br />	
			选择的单选框为：{{radioNames}}
			<hr />
			
			列表项选择
			<select v-model="selectValue">
				<option value="">请选择</option>
				<option v-for="(value,index) in selectList" v-bind:value="index">{{value}}</option>						
			</select>			
			选中的列表选项：{{selectValue}}
			
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:"#div1",
				data:{
					checkOne:false,
					
					checkedNames:[],
					checkboxValue:["复选框1","复选框2","复选框3"],
					checked:false,//全选框
					
					radioNames:"",
					R:"radio4",
					
					selectList:["列表选项1","列表选项2","列表选项3","列表选项4"],
					selectValue:"",
					
				},
				methods:{
					change:function(){//值改变
						if (!this.checked) {//取消全选，选择全选按钮时触发事件，此时的checked属性为非全选false
							this.checkedNames = this.checkboxValue;
						} else {
							this.checkedNames = [];
						}
					}
				}
				
				
			});
		</script>
		
	</body>
</html>

友人C君~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue表单用法

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue框架学习_复选框...&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js&q
复制链接

扫一扫