Vue.js 表单

最新推荐文章于 2022-08-06 09:12:29 发布

随枫潜入夜

最新推荐文章于 2022-08-06 09:12:29 发布

阅读量224

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42243957/article/details/107897274

版权

vue 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

在这里插入图片描述
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

复选框
以下实例中演示了复选框的双向数据绑定：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
	
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="baidu" v-model="checkedNames">
  <label for="baidu">baidu</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	checked : false,
    checkedNames: []
  }
})
</script>
</body>
</html>

在这里插入图片描述

单选按钮
以下实例中演示了单选按钮的双向数据绑定：
在这里插入图片描述

其他：
1、全选与取消全选

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
	<p>
		全选：
	</p>
	<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
	<label for="checkbox">
		{{checked}}
	</label>
	<p>
		多个复选框：
	</p>
	<input type="checkbox" id="baidu" value="baidu" v-model="checkedNames">
	<label for="baidu">
		baidu
	</label>
	<input type="checkbox" id="google" value="Google" v-model="checkedNames">
	<label for="google">
		Google
	</label>
	<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
	<label for="taobao">
		taobao
	</label>
	<br>
	<span>
		选择的值为:{{checkedNames}}
	</span>
</div>

new Vue({
	el: '#app',
	data: {
		checked: false,
		checkedNames: [],
		checkedArr: ["baidu", "Taobao", "Google"]
	},
	methods: {
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedNames = this.checkedArr
			} else {
				this.checkedNames = []
			}
		}
	},
	watch: {
		"checkedNames": function() {
			if (this.checkedNames.length == this.checkedArr.length) {
				this.checked = true
			} else {
				this.checked = false
			}
		}
	}
})

在这里插入图片描述
2、select 列表实例：

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
  <select v-model="selected" name="fruit">
    <option v-for="option in optionsList" :value='option.value'>{{option.key}}</option>
  </select>

  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>

new Vue({
	el: '#app',
	data: {
		optionsList:[{
			key:'选择',
			value:'Select'
			},{
			key:'淘宝',
			value:'taobao'
			},{
			key:'京东',
			value:'jingd'
			},{
			key:'阿里巴巴',
			value:'alibaba'
			},{
			key:'亚马逊',
			value:'amazon'
			},{
			key:'苏宁',
			value:'suning'
			},{
			key:'拼多多',
			value:'pinduoduo'
		}],
		selected: 'Select'
	}
})

在这里插入图片描述

3、动态全反选。
在这里插入图片描述

var app = new Vue({
    el: '#app',    
    data: {
        checks:false,
        checkList: [
            {id:1, name:'苹果'},
            {id:2, name:'香蕉'}, 
            {id:3, name:'栗子'},
            {id:4, name:'橘子'}
        ],        
        checksListOn: []
    },    
    methods: {
        Numlist : function(){
            if(this.checks){
                var listArr=[];
                for(var i=0;i<this.checkList.length;i++){
                    listArr.push(this.checkList[i].name);                
                }
                this.checksListOn = listArr;            
            }else {
                this.checksListOn = []
            }
        }
    },    
    watch: {
        "checksListOn":function () {
            if(this.checksListOn.length == this.checkList.length){
                this.checks = true            
            }else {
                this.checks = false           
            }
        }
    },
})

在这里插入图片描述

4、

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="form">
  <label for="username">昵称：</label>
  <input type="text" id="username" v-model.trim="username">
  <br>
  <label for="age">年龄：</label>
  <input type="number" id="age" v-model.number="age">
  <br>
  <label for="checkbox">单身：</label>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <br>
  <label>喜欢：</label>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <br>
<input type="submit" v-on:click="submit"/>
  <br/>
  <br/>
  <span>昵称: {{ username }}</span>
  <br>
  <span>年龄: {{ age }}</span>
  <br>
  <span>单身: {{ checked }}</span>
  <br>
  <span>喜欢: {{ checkedNames }}</span>
</div>

var app = new Vue({
    el: '#app',    
    data: {
        checks:false,
        checkList: [
            {id:1, name:'苹果'},
            {id:2, name:'香蕉'}, 
            {id:3, name:'栗子'},
            {id:4, name:'橘子'}
        ],        
        checksListOn: []
    },    
    methods: {
        Numlist : function(){
            if(this.checks){
                var listArr=[];
                for(var i=0;i<this.checkList.length;i++){
                    listArr.push(this.checkList[i].name);                
                }
                this.checksListOn = listArr;            
            }else {
                this.checksListOn = []
            }
        }
    },    
    watch: {
        "checksListOn":function () {
            if(this.checksListOn.length == this.checkList.length){
                this.checks = true            
            }else {
                this.checks = false           
            }
        }
    },
})

随枫潜入夜

关注

0
点赞
踩
0

收藏

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

输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：复选框以下实例中演示了复选框的双向数据绑定：<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.j.
复制链接

扫一扫