DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model指令title>
<script src="node_modules/vue/dist/vue.js" >script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
inputValue:"hello world",
chkState:true, //默认为true
chkArray:["1"], //处理成组的复选框需要定义一个数组，对应每个CheckBox的value值,这里默认第二个选中
chkLists:[{displayName:"科普读物",value:"0"},
{displayName:"中小学教材",value:"1"},
{displayName:"计算机科学",value:"2"}],
rdoCheck:"1",
// 动态处理radio
radioLists:[{name:"Gender",value:"1",displayName:"男"},
{name:"Gender",value:"2",displayName:"女"}],
sectionValue:"香蕉", // 没有value值，默认值就是name的值
sectionValue1:"0",
optionLists:[{value:"0",displayName:"苹果"},
{value:"1",displayName:"香蕉"},
{value:"2",displayName:"葡萄"}]
},
// 方法
methods:{
},
filters:{
toShowCheckBoxState:function(value){
return value==true?"选中":"未选中"
}
}
})
}
script>
head>
<body>
<div id="my">
<input type="text" v-model="inputValue" :disabled="inputValue==123">{{inputValue}}
<div>
<input type="checkbox" v-model="chkState">当前选中状态:{{chkState | toShowCheckBoxState}}
div>
<div>
<input type="checkbox" v-model="chkArray" value="0">唱歌
<input type="checkbox" v-model="chkArray" value="1">跳舞
<input type="checkbox" v-model="chkArray" value="2">打篮球
<p>当前选中的value值:{{chkArray}}p>
div>
<div>
<ul>
<li v-for="list in chkLists">
<input type="checkbox" v-model="chkArray" :value="list.value">{{list.displayName}}
li>
ul>
div>
<div>
<input type="radio" v-model="rdoCheck" name="Gender" value="1">男
<input type="radio" v-model="rdoCheck" name="Gender" value="2">女
<p>{{rdoCheck}}p>
div>
<div>
<ul>
<li v-for="list in radioLists">
<input type="radio" v-model="rdoCheck" :name="list.name" :value="list.value">{{list.displayName}}
li>
ul>
<p>{{rdoCheck}}p>
div>
<div>
<select v-model="sectionValue">
<option>苹果option>
<option>香蕉option>
<option>葡萄option>
select>
<p>{{sectionValue}}p>
div>
<div>
<select v-model="sectionValue1">
<option value="0">苹果option>
<option value="1">香蕉option>
<option value="2">葡萄option>
select>
<p>{{sectionValue1}}p>
div>
<div>
<select v-model="sectionValue1">
<option v-for="list in optionLists" :value="list.value">{{list.displayName}}option>
select>
<p>{{sectionValue1}}p>
div>
div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model指令title>
<script src="node_modules/vue/dist/vue.js" >script>
<script>
window.onload = function(){
var vm =new Vue({
el:'#my',
data:{
checkAll: {name:'全选',check:false},
lists:[{name:'小米',check:true},
{name:'华为',check:false},
{name:'苹果',check:false},
{name:'中兴',check:false},
{name:'OPPO',check:false}]
},
methods: {
checkAllChange:function(){
vm.lists.forEach(function(item){
item.check = vm.checkAll.check;
});
},
curChange:function(){
//true的状态
var curTure = this.lists.filter(function(item){
return item.check ==true;
});
curTure.length == this.lists.length ? this.checkAll.check = true : this.checkAll.check = false ;
}
}
})
}
script>
head>
<body>
<div id='my'>
<input type="checkbox" v-model="checkAll.check" @change="checkAllChange()">
<label>{{checkAll.name}} {{checkAll.check}}label>
<ul>
<li v-for="list in lists">
<input type="checkbox" v-model="list.check" @change="curChange()">
<label>{{list.name}} {{list.check}}label>
li>
ul>
div>
body>
html>
京公网安备 11010802041100号