监听器与异步更新和v-for

v-for

代码

div id="app">
   <ul>
<!--       <li v-for="item in arr">{{item}}</li>-->//循环迭代
       <li v-for="(item,index) in arr">{{item}}-------{{index}}</li>
//item表示数组中的每一条数据，index表示其索引值
</ul>
</div>
<!--配置vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            arr:[1,2,3,4,5,6]//数据
        }
    })

</script>

异步更新

<div id="app">
    <p id='op' @click="fn">{{text}}</p>
<!--    <p @click="fn">{{text}}</p>-->
    <!--{{b}}-->
    <!--{{c}}-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            text:'原来的文字',
            a:1,
            arr:[
                {name:'heaven',age:28}
            ]
        },
        methods:{
            fn(){
                this.text="更新后的文字",
                console.log(this.text)
                // this.arr.push({name:'海文'})
                //watch只监测到arr的长度之类的，不能检测器内容的变化
                this.arr[0].name = '海文'
                this.$nextTick(()=>{    //当视图更新完成后 回调函数触发
                            console.log(op.innerText);
                        })
            }
        },
        watch:{
            arr: {
                //watch只监测到arr的长度之类的，不能检测器内容的变化
                // console.log('data  中的arr被修改了  我观察到了'),
                // #如果想要监听到变化则要进行深度监听
                handler() {
                    console.log('data  中的arr被修改了  我观察到了')
                },
                deep:true   //深度监听
            }
        }
        //     }
        // }
    })

</script>

绑定类名

<div id="app">
    <p :hello="a" @click="fn"    class="on" :class="classobj" >hello world</p>
   //:class 表示vue的类变量
</div>
<!--配置vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            a:11,
            arr:['red','green'],
    //        数据是数组的时候
    //        :class=数组
    //       只要数组中存在某一项 则标签就会有对应数组项的类名
        classobj:{
                'red':true
        }
    },
        methods:{
            fn(){
                this.classobj.red=!this.classobj.red
            }
        }
    })
    // v-bind:属性名=属性值    <==>  :属性名=属性值  完全等价
</script>

绑定样式

<div id="app">
<!--    <p style='background:red' :style="{backgroundColor:yanse}">我是p标签</p>-->
    <p style='background:red' :style="[style1,style2]">我是p标签</p>
</div>
<!--配置vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            yanse:'lightblue',
            style1:{
                backgroundColor:'red',
            },
            style2:{
                width:'200px',
                height:'200px'
            }
        }
    })
    // :style=对象
    // 对象的键名是标签的属性名 键值是标签的属性值
    //
    //     :style=数组
    //
    // 多个对象的键名是标签的属性名
    // 多个对象的键值是标签的属性值
</script>