compute+watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="box">
<input type='text' v-model="firstname">
<input type='text' v-model="lastname">
<h1>{{fullname}}</h1>
</div>
</body>
<script>
var box=new Vue({
el:"#box",
data:{
firstname:"veb",
lastname:"len",
fullname:""
},
//第一种方式 利用计算属性
// computed:{
// fullname:function(){
// return this.firstname+" "+this.lastname;//算法：当依赖的属性发生改变的时候，这个算法也会发生响应
// }//fullname
// }
// 设置监听的方式fullname:""
// 首先初始化
created:function(){
this.fullname=this.firstname+" "+this.lastname;
},
//然后设置监听
watch:{
firstname:function(val){
this.fullname=val+" "+this.lastname;
},
lastname:function(val){
this.fullname=this.firstname+" "+val;
}
}
})
</script>
</html>
delete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="box">
</div>
</body>
<script>
var box=new Vue({
el:"#box",
data:{
list:[
{
title:"苹果"
}
]
}
})
</script>
</html>
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="box">
<table border="1" cellpadding="10" >
<tr>
<th>商品选择</th>
<th>商品种类</th>
<th>商品数量</th>
<th>商品价格</th>
</tr>
<tr v-for="(item,index) in list">
<td><input type="checkbox" :value="item" v-model="arr,flag" ></td><!--value前加上：是动态渲染的数据-->
<td>{{item.title}}</td>
<td>
<button @click="reduce(index)">-</button>
<button>{{item.count}}</button>
<button @click="add(index)">+</button>
</td>
<td>{{item.price}}</td>
</tr>
</table>
<p>加入购物车: {{arr}}</p>
<input type="radio" value="女" v-model="arr1">女
<input type="radio" value="男" v-model="arr1">男
<p>单选框: {{arr1}}</p>
<select v-model="arr2">
<option value="dfsdfsdf">音乐</option>
<option>电影</option>
<option>看书</option>
<option>写字</option>
</select>
<p>选择框: {{arr2}}</p>
<input type="checkbox" v-model="flag">
<p>flag: {{flag}}</p>
<button v-model="arr3" value="哈哈">三打三防</button>
<p>按钮: {{arr3}}</p>
</div>
</body>
<script>
var box=new Vue({
el:"#box",
data:{
list:[
{
title:"西瓜",
price:4,
count:0
},
{
title:"橘子",
price:5,
count:0
},
{
title:"柚子",
price:3,
count:0
},
],
arr:[],
arr1:[],
arr2:[],
arr3:[],
flag:true
},
methods:{
add:function(index){
this.list[index].count++;
},
reduce:function(index){
this.list[index].count--;
if(this.list[index].count<0){
this.list[index].count=0;
}
},
}
})
</script>
</html>
settle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="box">
<table border="1" cellpadding="10" >
<tr>
<th>商品种类</th>
<th>商品数量</th>
<th>商品价格</th>
</tr>
<tr v-for="(item,index) in list">
<td>{{item.title}}</td>
<td>
<button @click="reduce(index)">-</button>
<button>{{item.count}}</button>
<button @click="add(index)">+</button>
</td>
<td>{{item.price}}</td>
</tr>
</table>
<h1>{{total}}</h1>
</div>
</body>
<script>
var box=new Vue({
el:"#box",
data:{
list:[
{
title:"西瓜",
price:4,
count:0
},
{
title:"橘子",
price:5,
count:0
},
{
title:"柚子",
price:3,
count:0
},
],
total:0,
},
methods:{
add:function(index){
this.list[index].count++;
this.total+=this.list[index].price;//每次点击只需要加上一次
},
reduce:function(index){
this.list[index].count--;
if(this.list[index].count<0){
this.list[index].count=0;
}else{
this.total-=this.list[index].price;
}
}
}
})
</script>
</html>
settle+computed+清单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="box">
<table border="1" cellpadding="10" >
<tr>
<th>商品种类</th>
<th>商品数量</th>
<th>商品价格</th>
</tr>
<tr v-for="(item,index) in list">
<td>{{item.title}}</td>
<td>
<button @click="reduce(index)">-</button>
<button>{{item.count}}</button>
<button @click="add(index)">+</button>
</td>
<td>{{item.price}}</td>
</tr>
</table>
<h1>{{total}}</h1>
<button @click="flag=!flag" @click="shoplist">清单</button>
<ul v-show="flag">
<li v-for="item in shoplist">
您购买了{{item.title}}{{item.count}}斤,共花费{{item.count*item.price}}块钱！
</li>
</ul>
</div>
</body>
<script>
var box=new Vue({
el:"#box",
data:{
list:[
{
title:"西瓜",
price:4,
count:0
},
{
title:"橘子",
price:5,
count:0
},
{
title:"柚子",
price:3,
count:0
},
],
flag:false,
},
computed:{
total:function(){
var num=0;
this.list.forEach(function(val){
//当list中count发生改变的时候，相当与list也发生了改变，那么算法所依赖list发生改变的时候，就会响应
num+=val.count*val.price
},this)//this是改变this的指向，便利数组中的每一个元素se5
return num
},
shoplist:function(){
var arr=this.list.filter(function(val){
if(val.count>0){
return true;
}
});//过滤会直接返回一个新的数组
return arr;
}
},
methods:{
add:function(index){
this.list[index].count++;
},
reduce:function(index){
this.list[index].count--;
if(this.list[index].count<0){
this.list[index].count=0;
}
},
}
})
</script>
</html>
vue的计算属性和监听
网友评论