vue2.0学习笔记 ——computed

来源：互联网发布：F22数据编辑：程序博客网时间：2024/06/06 00:31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项 computed 20</title>
<link type="text/css" rel="stylesheet" href="../assets/css/index.css" />
<script src="../assets/js/vue.js"></script>
</head>

<body>
<h1>选项 computed</h1>
<hr />
<div id="app">
{{price}}
<p>原价:{{yuanjia}}</p>
<p>折扣:{{zhekou}}</p>
<p>现价:{{xianjia}}</p>
<p><button @click="add">+</button></p>
</div>

<script>
var vm = new Vue({
el:'#app',
data:{
message:10,
yuanjia:20,
zhekou:0.7
},
computed:{ //computed 计算price 把数据进行处理在data里面获取然后在这个函数里面计算
price:function(){
return this.message = '¥' + this.message
},
xianjia:function(){//现价就在computed里面计算好了
return '¥'+ this.yuanjia * this.zhekou
}
},
methods:{//用于事件
add:function(){
this.yuanjia++;
}
}
});
</script>
<script src="./webpack.js"></script>
</body>
</html>

0 0