06 【Vue数据监视 v-model双向绑定】

最新推荐文章于 2024-07-09 23:30:25 发布

DSelegent

最新推荐文章于 2024-07-09 23:30:25 发布

阅读量519

点赞数

分类专栏： vue2学习笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/DSelegent/article/details/126032262

版权

本文深入探讨了Vue中的数据监视，包括Vue.set的使用、数组监测的原理及注意事项，并详细阐述了v-model双向绑定的工作机制，涵盖不同场景下的表单数据收集及其修饰符的使用。

摘要由CSDN通过智能技术生成

13.Vue数据监视

13.1问题演示

先来个案例引入一下：

<!-- 准备好一个容器-->
<div id="root">
    <h2>人员列表</h2>
    <button @click="updateMei">更新马冬梅的信息</button>
    <ul>
        <li v-for="(p,index) of persons" :key="p.id">
            {
  {p.name}}-{
  {p.age}}-{
  {p.sex}}
        </li>
    </ul> 
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
     
        el:'#root',
        data:{
     
            persons:[
                {
     id:'001',name:'马冬梅',age:30,sex:'女'},
                {
     id:'002',name:'周冬雨',age:31,sex:'女'},
                {
     id:'003',name:'周杰伦',age:18,sex:'男'},
                {
     id:'004',name:'温兆伦',age:19,sex:'男'}
            ]
        },
        methods: {
     
            updateMei(){
     
                // this.persons[0].name = '马老师' //奏效
                // this.persons[0].age = 50 //奏效
                // this.persons[0].sex = '男' //奏效
                this.persons[0] = {
     id:'001',name:'马老师',age:50,sex:'男'} //不奏效
                // this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
            }
        }
    }) 

</script>