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标签。而且会报错，报错如下：

麻烦有路过的大神指点指点！

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

查阅资料，参考了别人的代码，终于找到了解决的方法：在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>

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

里面的值了

讲道理，不推荐你这样做。
视图 和 数据 应该分开处理。(至于为什么 请自行百度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)
        },
}

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