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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>
    
    <p v-on:click="numberchange" v-bind:value="plan"  v-for="item in numbers">{{item}} valuep>
    <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>

你可能感兴趣的:(前端,javascript,前端,vue.js)