4. Vue学习笔记4： 天气案例
<!--准备好一个容器-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<!--绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句-->
<!--<button @click="isHot = !isHot">切换天气</button>-->
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data: {
isHot: true
},
computed: {
info() {
return this.isHot? '炎热': '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
}
})
</script>