计算属性
对于比较复杂的逻辑运算，都应该使用计算属性，以便于后期维护
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性1</title>
</head>
<body>
<div class="itany">
<!-- 标签中-->
<h1>{{mes.split(' ').reverse().join('+++')}}</h1>
<!-- 计算属性-->
<a href="#">{{app}}</a>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
mes:'Vue hello'
},
computed:{
app:function(){
return this.mes.split(' ').reverse().join('+++');
}
}
})
</script>
</body>
</html>
制作加货小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加货</title>
</head>
<body>
<div class="app">
<button @click="btn">加货</button>
<h1>{{list}}</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:".app",
data:{
one:{uname:5,cont:3},
two:{uname:8,cont:4}
},
computed:{
list:function(){
return this.one.uname*this.one.cont+this.two.uname*this.two.cont
}
},
methods:{
btn:function(){
this.one.cont++;
}
}
})
</script>
</body>
</html>
网友评论