Vue2的计算属性和监听属性练习,v-for=‘‘ v-bind: v-model: v-on:click=‘change‘

本文链接：https://blog.youkuaiyun.com/weixin_42595747/article/details/132264995

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js/vue.js"></script>
</head>

<body>
<div id="app">
    <p>今天的计划{{plan}}</p>
    <button v-on:click="change">切换天气</button>
    <p>{{number.a}}</p>
    <button v-on:click.once='number.a++'>数字增加</button>
    <!-- 标签里的值可以传到外面来用event，然后属性里的值也可以传到里面去 -->
    <p v-on:click="numberchange" v-bind:value="plan"  v-for="item in numbers">{{item}} value</p>
    <input type="text" v-model:value="isSunny">
</div>

<script >
    let vm=new Vue(
        {el:"#app",
        data:{
            plan:"打篮球",
            isSunny:true,
            number:{
                a:1,
                b:2
            },
            numbers:[1,2,3,4,5]
        },

        // 用来监听data里面的值有没有改变,watch函数可以异步，compute不可以异步，异步在js里面就是同步
        watch:{
            deep:true,
            imemediate:true,
            isSunny:{
                handler(){
                    setTimeout(()=>{
                        this.plan=this.isSunny ? '打篮球':'敲代码'
                    },1000
                    )

                },
            },
            'number.a':{
                handler(){
                    console.log("a改变了")
                }
            },
        },

        methods: {
            change(){
                this.isSunny=!this.isSunny
            },
            numberchange(){
                this.number.a+=1
            }
        },
        }
    )
</script>
    
</body>
</html>