lfkabb
2019-08-30 10:16
采纳率: 18.8%
浏览 1.5k

vue.js怎样点击改变li样式并获取到其内容。

用vue框架做一个列表点击改变li的样式并获取到内容然后渲染到

,该怎么操作?
<ul class="menuList">
                    <li v-for="(site,index) in sites" v-on:click="chooesMenu(index)" :class="{'activeList':Index===index}" >{{site.name}}</li>
                </ul>

这是Html 。
js:

data:{ Index:0,}
method:{
    chooesMenu:function(index){
                this.Index=index;
                var menuText = index.currentTarget.innerText;
                console.log(menuText);
                document.getElementsByClassName("title")[0].innerText = menuText;
            },
}

这样可以实现点击改变li背景颜色,但是不能获取到内容到p标签。而且会报错,报错如下:
图片说明
麻烦有路过的大神指点指点!

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 花心小坚果 2019-08-30 10:20

    console.log(document.getElementsByClassName("title")[0]);
    console.log(index.currentTarget);
    把这两个返回值给我看看,因为你这段html没有class为title的片段

    打赏 评论
  • lfkabb 2019-08-30 11:13

    查阅资料,参考了别人的代码,终于找到了解决的方法:在html里面改一下:

    v-on:click="chooesMenu(index,$event)"
    

    在这个点击事件里面带两个参数。
    js method 里面:

    methods:{
                chooesMenu:function(index,event){
                    this.Index=index;
                    this.menuTitle = event.currentTarget.innerText;
                },
    

    前面的p标签做了数据绑定:

    <p class="title">{{menuTitle}}</p>
    

    这样就可以同时实现改变背景色和

    里面的值了
    打赏 评论
  • Kuukiliselessness 2019-08-30 12:35

    讲道理,不推荐你这样做。
    视图 和 数据 应该分开处理。(至于为什么 请自行百度MVVM框架)

    // ---------------------------------template------
    <ul class="menuList">
            <li v-for="(site,index) in sites" ref="sites" v-on:click="chooesMenu(index)" :class="{'activeList':activeIndex===index}" >{{site.name}}</li>
    </ul>
    
    // ---------------------------------   script   ------
    data:{ activeIndex:0, sites:[...]}
    method:{
            chooesMenu:function(index){
                    this.Index=index;
                    let this_site = this.sites[index];
                    this.$set(this_site, 'name', this_site+='_clicked' );
                    let this_site_el = this.$refs.sites[index]; // 如果你非要访问这个 dom实例 请用 refs
                    console.log(this_site_el)
            },
    }
    
    
    打赏 评论
  • 北巷小哥驾到 2019-08-30 15:19

    定义一个class然后点击的时候控制显隐不就行了

    打赏 评论

相关推荐 更多相似问题