计算属性1实例：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
</head>
<body>
<div id='itany'>
<button @click='add'>加货</button>
<h1>总价为:{{total}}</h1>
</div>
js部分：
<script src='js/vue.js'></script>
<script>
new Vue({
el:"#itany",
data:{
package1:{count:5,price:3},
package2:{count:8,price:4}
},
computed:{
total:function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>
</body>
</html>
计算属性2：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
<a href="#">{{revMsg}}</a>
<!--vue===hello hello vue-->
</div>
js代码：
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
methods:{},
filters:{},
computed:{
revMsg:function(){
return this.msg.split(' ').reverse().join('*');
}
}
})
</script>
</body>
</html>
网友评论