javascript - 关于vue的this指向

问题描述

问 题

var city = new Vue({
    el:'.city',
    data:{
        choices:[
            {cities:'北京'},
            {cities:'上海'},
            {cities:'福州'},
            {cities:'广州'},
            {cities:'青岛'}
        ]
    },
    methods:{
        changeCity:function(){
            $(this).css('color','red').siblings().css('color','');  //问题在这里，这里的this好像不是指向点击的那个元素，好像是指向vue里面的，该怎么办？
        }
    }
    
});

<p class="city">    切换城市：
    <a href="#" v-on:click="changeCity"  v-for="item in choices">
    {{item.cities}} 
    </a>
</p>

解决方案

为什么不用vue中的class与style绑定呢？

我之前写过一篇文章介绍使用Vue.js实现选中高亮的效果，很简洁：

使用Vue.js实现列表选中效果

或者你也可以参考下面例子：

https://jsfiddle.net/xiaoluoboding/z5xusoL9/

这篇关于javascript - 关于vue的this指向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！