最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • (二)vue3之v-for Array Refs

    正文概述 掘金(Atdow)   2021-01-01   979

    1.简介

    在vue2中,v-for绑定$refs将会自动生成一个refs的数组,但是在v-for中这种行为将会变得有歧义和不高效。 而在vue3中,这种用法就不会生效,因为vue3不会自动生成refs的数组。如果我们需要拿到多个的refs组成的数组,那么就需要使用函数的方式手动去绑定。

    2.vue2中的用法

    <template>
      <div>
        <ul>
          <!-- 绑定ref -->
          <li v-for="(item, index) in list" :key="index" ref="liRef">
            {{ item }}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          list: [1, 2, 3],
        };
      },
      components: {},
      mounted() {
        console.log("ref:", this.$refs.liRef);
      },
    };
    </script>
    

    打印出来的结果如下:
    (二)vue3之v-for Array Refs

    我们可以看到,在vue2中会自动生成refs数组。

    3.vue3中的用法

    如果我们还是使用vue2中的用法,将会得到如下结果: (二)vue3之v-for Array Refs

    这时我们可以看到,vue3并不会自动帮我们生成refs数组,只能得到最后一个元素的ref。如果我们需要在v-for中绑定ref并生成refs数组,则需要使用函数的方式手动绑定,用法如下:

    <template>
      <div>
        <ul>
          <!-- 绑定ref -->
          <li v-for="(item, index) in list" :key="index" :ref="setItemRef">
            {{ item }}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          list: [1, 2, 3],
          itemRefs: [],
        };
      },
      methods: {
        setItemRef(el) {
          this.itemRefs.push(el);
        },
      },
      beforeUpdate() {
        this.itemRefs = [];
      },
      mounted() {
        console.log("ref:", this.itemRefs);
      },
      updated() {
        // console.log(this.itemRefs);
      },
    };
    </script>
    

    从代码中我们可以看到,ref绑定的是一个setItemRef函数,而setItemRef做的事情就是el push到itemRefs数组中,打印的结果如下:

    (二)vue3之v-for Array Refs

    现在的到的结果和vue2中的是相似的。

    4.vue3 Array Refs的新特性

    现在的itemRefs不一定是一个数组,它也可以是一个对象。

    setItemRef(el) {
      // this.itemRefs.push(el);
      // data中的itemRefs需要定义为对象
      let index = parseInt(Math.random(1) * 1000);
      this.itemRefs[index] = el;
    },
    

    (二)vue3之v-for Array Refs

    通过这样简单的实例改写方式,可以将itemRefs定义为一个对象。


    起源地下载网 » (二)vue3之v-for Array Refs

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元