vue中的计算属性
2018-09-18 本文已影响0人
信不由衷
1.计算属性的概念和两种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{magever}}</h1><!--一般用这种，为了避免模板加入过重的业务逻辑，利于后期维护-->
<h2>{{msg.split(" ").reverse().join("===")}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello vue"
},
computed:{
magever:function(){
return this.msg.split(" ").reverse().join("===")
}
}
})
</script>
</body>
</html>
2.计算属性的应用(加货应用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="alt">加货</button>
<h1>总价:{{msgever}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
pack1:{priec:3,count:5},
pack2:{priec:4,count:6}
},
computed:{
msgever:function(){
return this.pack1.priec*this.pack1.count+this.pack2.priec*this.pack2.count
}
},
methods:{
alt:function(){
this.pack1.count++
}
}
})
</script>
</body>
</html>
