计算属性 -[只有在你当前的属性发生变化后才会被触发]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性和侦听器</title>
<style> body{padding: 40px;} em{ background: #c5b052; color: #fff; padding: 0 6px; margin: 0 6px; font-style: inherit;} button{ padding: 0 20px; height: 40px; line-height: 40px; background-color: #42b983; color: #fff; border: 0;} h1 span{ color: #999; font-size: 80%;}</style>
</head>
<body>
<div id="app">
<h1>计算属性 <span>// 只有在你当前的属性发生变化后才会被触发</span></h1>
<h4>计算属性里面的每个方法必须是<em>return</em>出来，可以是属性</h4>
<p>我是计算属性值：{{add}} <button @click="num++">add</button></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
num: 0
},
methods: {
},
computed:{
add(){
return this.num
}
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号