vue.js--form

最新推荐文章于 2024-05-20 09:51:14 发布

weixin_30263073

最新推荐文章于 2024-05-20 09:51:14 发布

阅读量102

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cherryblog/p/7700675.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id='app'>
		<p>输入框</p>
		<input type='text' placeholder='-----' v-model='text'>
		<p>输入内容：{{ text }}</p>
		<hr>
		<p>单复选框</p>
		<input type='checkbox' id='AAAA' value='Aaaa' v-model='checked'/>
		<label for='AAAA'>{{ checked }}</label>
		<hr>
		<p>多个复选框</p>
		<input type='checkbox' id='BB' value='Bb' v-model='checkedNames'/>
		<label for='BB'>Bb</label>
		<input type='checkbox' id='CC' value='Cc' v-model='checkedNames'/>
		<label for='CC'>Cc</label>
		<p>选择结果：{{ checkedNames }}</p>
		<hr>
		<p>单选框</p>
		<input type='radio' id='DD' value='dd' v-model='picked'/>
		<label for='DD'>dd</label>
		<input type='radio' id='EE' value='ee' v-model='picked'/>
		<label for='EE'>ee</label>
		<hr>
		<p>下拉框</p>
		<select v-model='selected'>
			<option value=''>请选择。。。</option>
			<option value='aa'>AA</option>
			<option value='bb'>BB</option>
		</select>
		<hr>
		<p>单复选框</p>
		<input type='checkbox' id='HH' value='Hh' v-model='checkedOnly' @click="changeAllChecked()"/>
		<label for='HH'>{{ checkedOnly }}</label>
		<p>多个复选框</p>
		<input type='checkbox' id='FF' value='Ff' v-model='checkeds'/>
		<label for='FF'>Ff</label>
		<input type='checkbox' id='GG' value='Gg' v-model='checkeds'/>
		<label for='GG'>Gg</label>
		<p>选择结果：{{ checkeds }}</p>
		
	</div>
	
	<script>
		new Vue({
			el:'#app',
			data:{
				text: '',
				checked: false,
				checkedNames: [],
				picked:'dd',
				selected: '',
				checkedOnly: false,
				checkeds:[],
				checkedAll:["Ff", "Gg"]
			},
			methods:{
				changeAllChecked: function(){
					if(this.checkedOnly){
						this.checkeds = this.checkedAll
					}else{
						this.checkeds =[]
					}
				}
			},
			watch:{
				"checkeds": function(){
					if(this.checkeds.length == this.checkedAll.length){
						this.checkedOnly = true
					} else {
						this.checkedOnly = false
					}
				}
			}
		})
	</script>
</body>
</html>

转载于:https://www.cnblogs.com/cherryblog/p/7700675.html

weixin_30263073

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js--form

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"...
复制链接

扫一扫