关于vue的this指向

Question

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>

Answer 1

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

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

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

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

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

Answer 2

vue中methods对象里的函数, this指向的都是当前实例或者组件

<a href="#" v-on:click="changeCity"  v-for="item in choices">

改成

<a href="#" v-on:click="changeCity($event)"  v-for="item in choices">

changeCity:function(){
    $(this).css('color','red').siblings().css('color','');
}

改成

changeCity:function(e){
    $(e.target).css('color','red').siblings().css('color','');
}

Answer 3

你这样写的this是指向一个vue的实例vm；需要注意的是这里是vue不是jQuery哦，我觉得在vue中吧样式绑定到数据挺好的，这样就不用直接操作dom啦

Answer 4

vue 是数据驱动，用数据来控制view 层的样式，一定要摆脱 jQuery 直接操作 DOM 那种思维模式

Answer 5

为什么都使用了vue，还要用jQuery操作dom？