我们首先用计算属性实现一个天气案例，引出监听属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天气案例</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!--
三元表达式
条件表达式?表达式1:表达式2;
a) 如果条件表达式为true，则运算后的结果是表达式1；
b) 如果条件表达式为false，则运算后的结果是表达式2；
-->
<!--插值语法实现天气案例-->
<h2>今天天气很{{isHot ? "炎热" : "凉爽"}}</h2>
<!--计算属性实现天气案例-->
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
el:"#root",
data(){
return{
isHot:true
}
},
methods:{
// 切换天气方法
changeWeather(){
this.isHot = !this.isHot
}
},
computed:{
//计算属性的简写形式
info(){
return this.isHot ? "炎热" : "凉爽"
}
}
})
</script>
</body>
</html>
