您现在的位置是:首页 > 正文

数组侦听(vue.js笔记)

2024-04-01 04:09:46阅读 1

1.侦听器:

  1. watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。例如,监视用户名的变化并发起请求,判断用户名是否可用。
  2. 侦听器,也称为侦听属性。它可以监听指定的属性值的变化 ,只要属性值发生了变化 就会自动的触发相应的侦听器
  3. 相比之下,它比计算属性更通用,特别是在有异步操作的场景下
    watch:{
        // 定义侦听函数
        想侦听的属性名称(新值,旧值){
            // 业务处理
        }
    }
    

    以上是基本结构 

2.数组的侦听 

数组是无法直接被侦听和渲染的,即便是加了deep也无法渲染或则侦听,但我们可以通过侦听其他属性的值这种方法来改变数组的值达到同步渲染的效果。

 

    <span id="test" :key="ke">侦听的值:{{ val }}</span>
    <script>
        let vm = new Vue({
            el:"#test",
            data:{
                val:["第一个值","第二个值"],
                ke:0
            },
            watch:{
                ke(){
                    this.val[0]="123"
                }
            }
        })
    </script>

2.使用标准方法修改数组可以被侦听到

    push() 尾部添加

    pop()尾部删除

    unshift()头部添加

    shift()头部删除

    splice()删除、添加、替换

    sort()排序

    reverse()逆序

  (Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)

    //     data() {
    //     return {
    //         list: [1, 2, 3, 4, 6],  //需要被监听的数组
    //     }
    // },
    // watch: {
    //     list(newVal, oldVal) {  //对数组进行监听
    //         console.log(newVal)
    //         console.log(oldVal)
    //     },
    // },
        //created() {
        //this.list.splice(1,1,666)  //用splice方法,将数组index=1的数值改成换成666
        // this.list.push("") // 增加空值  也能监听到
        // this.list.pop()
        // this.list.shift()
        //this.length = 10  //直接改变数组长度  无效
    //}

 

<body>
    <div id="app">
        <li v-for="item in list">
            {{item}}
        </li>
        <ul>
            <button @click="list.push('蜡笔小新')">添加一个项</button>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['千与千寻','哈尔的移动城堡','龙猫']
            },
            watch:{
                //复杂数据类型,这两个参数没有意义,因为地址没变。
                //所以复杂类型中,一般不会写这两个参数,因为这两个参数的值是一样的,就算写也是写一个。
                list(newValue,oldValue){
                    console.log('数组改变了',newValue,oldValue);
                }
            }
        })
    </script>
</body>

 

网站文章

  • JavaScript函数的部分题目

    JavaScript函数的部分题目

    题目一:百分制变五级制 题目二:输出自定义的表格

    2024-04-01 04:09:38
  • 篇三:Jmeter察看结果树与保存

    篇三:Jmeter察看结果树与保存

    篇三:Jmeter察看结果树与保存 一、添加Jmeter察看结果树 1.通过右击HTTP请求添加察看结果树。此处添加只对当前的HHTP请求起作用,运行的时候只执行当前的HTTP请求,查看结果也只能查看...

    2024-04-01 04:09:31
  • java web单点登录异常情况处理

    1.用户登录系统后并未点击安全退出按钮而是直接关闭浏览器,这样再次登录时,由于并未实施application map和session的清除工作,所以用户登录的信息还在loginUserMap中,再次登录时则提示已经登录。只有等session timeout 失效后才能登录,一般时间较长,十分影响用户体验。 2.断网,浏览器崩溃等异常情况,出现这种情况,session和map也未及

    2024-04-01 04:08:55
  • 成功解决TypeError: a bytes-like object is required, not &#39;str&#39; 热门推荐

    成功解决TypeError: a bytes-like object is required, not &#39;str&#39; 热门推荐

    成功解决TypeError: a bytes-like object is required, not &#39;str&#39; 目录 解决问题 解决思路 解决方法 解决问题 TypeError: a bytes-like object is required, not &#39;str&#39; 解决思路 问题出在python3.5和Python2.7在套接字返回值解...

    2024-04-01 04:08:46
  • 跨域解决方案以及重复提交解决方案

    跨域原因产生:在当前域名请求网站中,默认不允许通过ajax请求发送其他域名解决方案使用后台response添加header后台response添加header,response.setHeader("Access-Control-Allow-Origin", "*"); 支持所有网站使用JSONP$.ajax({ type :...

    2024-04-01 04:08:37
  • Unexpected exception parsing XML document from file

    基本是jar包冲突引起,认真排查自己的pom文件,找到冲突的jar删除 即可,下面附上我的pom文件[2020/05/13 17:19:04816][ERROR][org.springframewor...

    2024-04-01 04:07:57
  • python 判断文件是否存在的三种方法

    文章目录前言一、使用os模块1.1 判断文件是否存在1.2 判断文件夹是否存在1.3 判断文件是否可做读写操作二、使用Try语句三、 使用pathlib模块 前言 通常在读写文件之前,需要判断文件或目...

    2024-04-01 04:07:50
  • 微信视频号通过objectId和objectNonceId解析出视频

    拿到视频号objectId和objectNonceId以后(如何拿到objectId和objectNonceId,有很多方式,这里不就不详细说明了),可以通过解析接口解析出视频,直接上代码。

    2024-04-01 04:07:43
  • 计算机网络分层结构

    计算机网络分层结构文章目录计算机网络分层结构一、计算机网络的分层一、计算机网络的分层  Java、大数据开发学习要点(持续更新中…)参考:王道考研计算机网络

    2024-04-01 04:06:56
  • 美团,滴滴,蘑菇街Java大数据面经分享

    大概在三月份开始面了几家互联网公司,主要方向是java后端和大数据开发,最近整理学习资料,所以分享一下美团,滴滴,蘑菇街等公司的面经。美团一面聊你最熟悉的项目和技术。项目中为什么要使用spark。spark怎么划分stage,宽窄依赖,聊源码spark提交一个作业的执行流程(单机模式)spark driver节点,worker以及master节点遇到故障如何解决。spark ...

    2024-04-01 04:06:49