Vue中V-model绑定控件表单
V-model绑定单行文本框
<div id="app">
<p>多行文本框</p>
<textarea v-model="msg" placeholder="请输入此处进行编辑"/></textarea>
<p style="white-space: pre;">{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:""
}
})
</script>V-model绑定多选框，实现全选 全不选 反选
定义三个数组，两个空数组，一个加入所有选择的value，全选时候让其中一个空数组等于全数组，全不选让数组等于空数组。
<div id="exmaple">
<input type="checkbox" v-model="checkNames" value="上网" />
<label for="net">上网</label>
<input type="checkbox" v-model="checkNames" value="旅游" />
<label for="tourism">旅游</label>
<input type="checkbox" v-model="checkNames" value="看书" />
<label for="book">看书</label>
<input type="checkbox" v-model="checkNames" value="电影" />
<label for="movie">电影</label>
<input type="checkbox" v-model="checkNames" value="游戏" />
<label for="game">游戏</label>
<p v-if="checked">
你的兴趣爱好：{{result}}
</p>
<p>
<button @click="allChecked">全选</button>
<button @click="reverseChecked">反选</button>
<button @click="noChecked">全不选</button>
</p>
</div>
<script>
var vm = new Vue({
el: "#exmaple",
data: {
checked: false,
checkNames: [],
checkedArr: ["上网", "旅游", "看书", "电影", "游戏"],
temArr: []
},
computed: {
result: function() {//获取所有爱好
var show = '';
for (var i = 0; i < this.checkNames.length; i++) {
show += this.checkNames[i] + ' ';
}
return show;
}
},
methods: {
allChecked: function() {
this.checkNames = this.checkedArr;
},
noChecked: function() {
this.checkNames = [];
},
reverseChecked: function() {
this.temArr = [];
for (var i = 0; i < this.checkedArr.length; i++) {
if (!this.checkNames.includes(this.checkedArr[i])) {
this.temArr.push(this.checkedArr[i]);
}
}
this.checkNames = this.temArr;
}
},
watch: {
"checkNames": function() {
console.log(this.checkNames)
if (this.checkNames.length > 0) {
this.checked = true;
} else {
this.checked = false;
}
}
}
})
</script>绑定单选框
<div id="exmaple">
<h2>查话费流量</h2>
<input type="radio" v-model="type" value="balance" />
<label for="balance">查话费</label>
<input type="radio" v-model="type" value="traffic" />
<label for="traffic">查流量</label>
<input type="button" v-on:click="check" value="查询" />
<p v-if="show">
{{msg}}
</p>
</div>
<script>
var vm = new Vue({
el: "#exmaple",
data: {
type: '',
show: false,
msg: ''
},
methods: {
check: function() {
this.show = true;
if (this.type == 'balance') {
this.msg = "你的余额为6.66"
} else if (this.type == 'traffic') {
this.msg = "你的余额为9.66"
} else {
this.msg = "请输入查询类别"
}
}
}
})
</script>绑定双向下拉列表
<div id="app" style="display: flex;justify-content: space-around;align-items: center;width: 400px;">
<div class="left">
<span>可选职位</span>
<select size="6" multiple="multiple" v-model="job">
<option v-for="value in joblist" :value="value">{{value}}</option>
</select>
</div>
<div class="middle" >
<input type="button" value=">>" @click="toMyjob" style="display: block;"/>
<input type="button" value="<<" @click="tojob" style="display: block;"/>
</div>
<div class="right">
<span>已选职位</span>
<select size="6" multiple="multiple" v-model="job">
<option v-for="value in myjoblist" :value="value">{{value}}</option>
</select>
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
joblist:['歌手','演员','酒店管理','教师','公务员','公司','公司支援'],
myjoblist:[],
job:[],
},
methods:{
toMyjob:function(){
for(var i=0;i<this.job.length;i++){
this.myjoblist.push(this.job[i]);//选中的添加到右边数组中
var index=this.joblist.indexOf(this.job[i]);//获取选中的下标
this.joblist.splice(index,1);//右边移除
}
this.job=[];//清空选中数组
},
tojob:function(){
for(var i=0;i<this.job.length;i++){
this.joblist.push(this.job[i]);
var index=this.myjoblist.indexOf(this.job[i]);
this.myjoblist.splice(index,1);
}
this.job=[];
}
}
})
</script>绑定地区选择的三个下拉列表
<div id="app">
<select v-model="province">
<option value="">请选择</option>
<option v-for="item in provinces">{{item}}</option>
</select>
<select v-model="city">
<option value="">请选择</option>
<option v-for="item in citys">{{item}}</option>
</select>
<select v-model="district">
<option value="">请选择</option>
<option v-for="item in districts">{{item}}</option>
</select>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
province: '',
city: '',
district: '',
addressData: {
'黑龙江': {
'哈尔滨市': {
'道理区': {},
'南港区': {}
},
'齐齐哈尔市': {
'龙沙区': {},
'建华区': {}
}
},
'吉林省': {
'长沙市': {
'朝阳区': {},
'南关区': {}
},
'吉林市': {
'船营区': {},
'龙潭区': {}
}
},
'辽宁省': {
'沈阳市': {
'和平区': {},
'沈河区': {}
},
'大连市': {
'中山区': {},
'金州区': {}
}
}
}
},
watch: {
province: function(newValue, oldValue) {
if (newValue !== oldValue) {
this.city = '';
}
},
city : function(newValue, oldValue) {
if (newValue !== oldValue) {
this.district = '';
}
}
},
computed: {
provinces: function() {
if (!this.addressData) {
return;
}
var pArr = [];
for (var key in this.addressData) {
pArr.push(key)
}
return pArr;
},
citys: function() {
if (!this.addressData || !this.province) {
return;
}
var cArr = [];
for (var key in this.addressData[this.province]) {
cArr.push(key);
}
return cArr;
},
districts: function() {
if (!this.addressData || ! this.city) {
return;
}
var dArr = [];
for (var key in this.addressData[this.province][this.city]) {
dArr.push(key);
}
return dArr;
}
}
})
</script>