<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>天氣案例_監(jiān)視屬性</title>
? ? <!-- 引入Vue -->
? ? <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
? ? <div id="root">
? ? ? ? <h2>今天天氣很{{info}}</h2>
? ? ? ? <button @click="changeWeather">切換天氣</button>
? ? ? ? <hr>
? ? ? ? <h3>a的值是：{{numbers.a}}</h3>
? ? ? ? <button @click="numbers.a++">點(diǎn)我讓a+1</button>
? ? </div>
</body>
<script type="text/javascript">
? ? Vue.config.productionTip = false
? ? const vm = new Vue({
? ? ? ? el: '#root',
? ? ? ? data: {
? ? ? ? ? ? isHot: true,
? ? ? ? ? ? numbers:{
? ? ? ? ? ? ? ? a:1,
? ? ? ? ? ? ? ? b:1
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? computed: {
? ? ? ? ? ? info() {
? ? ? ? ? ? ? ? return this.isHot ? '炎熱' : '涼爽'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? changeWeather() {
? ? ? ? ? ? ? ? this.isHot = !this.isHot
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? watch:{
? ? ? ? ? ? //正常寫法
? ? ? ? ? /*? isHot:{
? ? ? ? ? ? ? ? handler(newValue,oldValue){
? ? ? ? ? ? ? ? ? ? console.log('isHot被修改了',newValue,oldValue)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, */
? ? ? ? ? ? isHot(newValue,oldValue){
? ? ? ? ? ? ? ? console.log('asdasdasd')
? ? ? ? ? ? }
? ? ? ? }
? ? })
? ? vm.$watch('isHot',function(newValue,oldValue){
? ? ? ? ? ? ? ? console.log('asdasdasd')
? ? ? ? ? ? })
</script>
</html>
