[vue.js]如何在循环中对部分个体进行操作

最新推荐文章于 2023-04-16 18:04:38 发布

dihuachong6482

最新推荐文章于 2023-04-16 18:04:38 发布

阅读量133

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/espelansa/p/7623131.html

版权

这个问题困扰了我很久，甚至一度觉得vue.js真的是很让人头疼，可能也是因为我没有接触过太多前端模板的缘故。

搜到的方法试过以后觉得这个办法最好，在这里做一个记录。

总体思路：尽量遵从数据驱动的角度去处理。

具体方法：

① data里设定一个index不会取到的值例如 i:-1

② 绑定的methods中把index作为参数传入函数，并将index值赋值给i

③ 通过index 与 i 之间的关系来作为判断是否执行methods的依据

以我刚刚写到的代码为例

<html>

<li class="listblog-item" v-for="(item,index) in arrangeData[key][key2]">
                    
  <h3 @mouseover="beUnderline(index)" @mouseout="i=-1">

     <a v-bind:class="{ underline: index === i }" href="">{{ item.title }}</a>

  </h3>

</li>

<js>

data:{
　　i:-1
},
methods:{ 
　　beUnderline:function(index){
      　　this.i = index
    }
}

以上代码实现的功能是移到某一个li里的标题上时，只有该li的标题增加一个class，其余都不增加

-----------------------分割线------------------------

最近我还遇到的其他问题有：

因为在自己做一个博客，需要对文章内容进行逆序排列显示。比较特殊的是数据格式整理完大致是这样的：

var list = {
    2017：{
        9：[1,2,3],   //1，2，3代表文章的信息，这里不写全了，不会影响结果
        7：[1,2,3,4]
    },
    2016:{
        10:[1,2,3,4,5],
        9:[1,3]
    }
}

但是vue的v-for有点奇怪，无论我对象怎么排序，v-for出来的结果永远是2016在2017上面，7在9上面。。。

如果您知道怎么解决这个问题，还请您留言指点一二！

对于这篇博文如果您有更好/其他的思路、办法，也欢迎您留言！

望能不吝赐教！~~ 谢谢！~~~

转载于:https://www.cnblogs.com/espelansa/p/7623131.html

dihuachong6482

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[vue.js]如何在循环中对部分个体进行操作

这个问题困扰了我很久，甚至一度觉得vue.js真的是很让人头疼，可能也是因为我没有接触过太多前端模板的缘故。搜到的方法试过以后觉得这个办法最好，在这里做一个记录。总体思路：尽量遵从数据驱动的角度去处理。具体方法：① data里设定一个index不会取到的值例如 i:-1② 绑定的methods中把index作为参数传入函数，并将index值赋值给i③ 通过i...
复制链接

扫一扫