<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<!-- <div v-model="dwa">
</div> -->
<input type="text" v-model="mytext"/>
{{mytext}}
<textarea v-model="mytext"></textarea>
记住用户名：<input type="checkbox" v-model="isChecked"/>
<br/>
vue:<input type="checkbox" v-model="checkedgroup" value="vue"/>
react:<input type="checkbox" v-model="checkedgroup" value="react"/>
jquery:<input type="checkbox" v-model="checkedgroup" value="jquery"/>
{{checkedgroup}}
<br/>
vue:<input type="radio" value="vue" name="favorlan" v-model="picked"/>
react:<input type="radio" value="react" name="favorlan" v-model="picked"/>
jquery:<input type="radio" value="jquery" name="favorlan" v-model="picked"/>
<button>confirm</button>
</div>
<!-- <div v-model=""></div> -->
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
name:"xiaoming",
mytext:"11111",
isChecked:false,
checkedgroup:[],//
picked:""
}
})
/*
v-model 绑定是 状态 跟 控件 value值或者checked
多个多选框 绑定 需要绑定一个数组， 需要每个控件都有一个value值
*/
</script>
</body>
</html>购物车：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleAllChecked()" v-model="isAllChecked"/>
<ul>
<li v-for="data in datalist" :key="data.id">
<input type="checkbox" @change="handleChange()" v-model="checkgroup" :value="data"/>{{data}}
<button @click="handleDelClick(data)">del</button>
<input type="number" v-model="data.number"/>
<button @click="handleAddClick(data)">add</button>
</li>
</ul>
{{checkgroup}}
<p>总金额{{sum}}</p>
<p>计算属性总金额{{computedShopcarSum}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
checkgroup:[],
isAllChecked:false,
sum:0,
datalist:[
{
name:"商品1",
price:10,
number:1,
id:"1",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
},
{
name:"商品2",
price:20,
number:2,
id:"2",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
},
{
name:"商品3",
price:30,
number:3,
id:"3",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
}
]
},
methods:{
handleAllChecked(){
console.log("处理多选按钮",this.isAllChecked);
if(this.isAllChecked){
this.checkgroup = this.datalist;
}else{
this.checkgroup = [];
}
this.computedsum();
},
handleDelClick(data){
data.number--;
if(data.number===0){
data.number=1;
}
this.computedsum();
},
handleAddClick(data){
data.number++;
this.computedsum();
},
handleChange(){
// console.log("111")
if(this.checkgroup.length === this.datalist.length){
console.log("全选中")
this.isAllChecked = true;
}else{
console.log("没全选")
this.isAllChecked = false;
}
this.computedsum();
},
computedsum(){
console.log("重新计算总金额，关注已经勾选的数据，累加计算就可以了")
var mysum = 0;
for(var i=0;i<this.checkgroup.length;i++){
mysum += this.checkgroup[i].number*this.checkgroup[i].price;
}
this.sum = mysum;
}
},
computed:{
computedShopcarSum(){
var mysum = 0;
for(var i=0;i<this.checkgroup.length;i++){
mysum += this.checkgroup[i].number*this.checkgroup[i].price;
}
return mysum;
}
}
})
/*
checkbox 绑定是 数组， 需要设置value(动态绑定 ：) ,
value 对象
*/
// var name="kerwin"
// var obj = {
// name:name,
// getName:function(){
// }
// }
// var obj2= {
// name,
// getName(){
// }
// }
</script>
</body>
</html>
修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model.lazy="name" />
{{name}}
<input type="number" v-model.number="age"/>
{{age}}
<input type="text" v-model.trim="mytext"/>
|{{mytext}}|
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
name:"xiaoming",
age:100,
mytext:""
},
watch:{
name(){
console.log("name改变了，-复杂运算")
}
}
})
//语法糖
// v-model es5 get set拦截 ，input(input type=text) , change(checkbox)
//
// polyfill 腻子粉
// promsie -polyfill
// fetch fetch polyfill
//
// 轮子 （jquery 插件）
// 兼容性 ：https://caniuse.com
</script>
</body>
</html>
Comments | NOTHING