| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>天气案例_监视属性</title>
- <!-- 引入vue -->
- <script type="text/javascript" src="../js/vue.js"></script>
- </head>
- <body>
- <!--
- 监视属性watch：
- 1、当被监视的属性变化时，回调函数（本例中的handler）自动调用，进行相关操作
- 2、监视的属性必须存在，才能进行监视！！
- 3、监事会的两种写法：
- （1）、new Vue时传入watch配置
- （2）、通过vm.$watch监视
- -->
- <!-- 准备好一个容器 -->
- <div id="root">
- <h2>今天天气很{{info}}</h2>
- <button @click="changeWeathers">切换天气</button>
- </div>
-
- </body>
- <script type="text/javascript">
- Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
- const vm = new Vue({
- el:'#root',
- data:{
- isHot:true
- },
- computed:{
- info(){
- return this.isHot ? '炎热' : '凉爽'
- }
- },
- methods: {
- changeWeathers(){
- this.isHot = !this.isHot
- }
- },
- // watch:{
- // isHot:{
- // immediate:true, //初始化时让handler调用一下
- // // handler什么时候调用？当isHot发生改变时。
- // handler(newValue,oldValue){
- // console.log('isHot被修改了',newValue,oldValue)
- // }
- // },
- // // 可以监视计算属性
- // // info:{
- // // immediate:true, //初始化时让handler调用一下
- // // // handler什么时候调用？当isHot发生改变时。
- // // handler(newValue,oldValue){
- // // console.log('info',newValue,oldValue)
- // // }
- // // }
- // }
- })
- vm.$watch('isHot',{
- immediate:true, //初始化时让handler调用一下
- // handler什么时候调用？当isHot发生改变时。
- handler(newValue,oldValue){
- console.log('isHot被修改了',newValue,oldValue)
- }
- })
- </script>
- </html>
|
