• 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"></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>
    

      

  • 相关阅读:
    python 中的深拷贝和浅拷贝
    时间复杂度
    为什么l1和l2可以防止过拟合
    逻辑回归实现多分类
    《深入浅出数据分析》读书笔记
    牛客网的输入和输出
    万物皆可embedding
    NLP中的mask的作用
    不同语言对单例模式的不同实现
    ElasticSearch 索引 VS MySQL 索引
  • 原文地址:https://www.cnblogs.com/cherryblog/p/7700675.html
Copyright © 2020-2023  润新知