Vue如何判断点击元素是想要想元素呢?

Question

传统JQ里面可以通过点击元素判断是否存在一个class或者一个attr来判断是不是想要的元素,那么Vue如何来判断呢?

Answer 1

思维要转变，不要还想着获取DOM节点，数据驱动，通过点击事件改变数据
案例
仅供参考
官方文档

-----回答评论-----

     <div class="vueBox">
        <ul class="faq_list">
            <li :class="['blue',curIdx==index ? 'red' : 'green']" v-for="(faq,index) in faqList"  @click="selectFaq(event,index)">
                <span  v-text="faq.title"> </span>
            </li>
        </ul>
    </div>
    <script src="js/vue.min.2.5.13.js"></script>
    <script src="js/vue.index.js"></script>

// vue.index.js
var vm = new Vue({
    el: ".vueBox",
    data: {
        arrow:'images/arrow.png',
        curIdx:0,
        faqList:[
            {
                title:'如何上魅力榜',
            },
            {
                title:'如何上贡献榜',
            },
            {
                title:'如何上cp榜',
            }
        ] },
    created:function() { },
    methods: {
        selectFaq:function(e,index){
            console.log(e); 
            //根据索引值查找数据得到你想要的数据 
             console.log(this.faqList[index].title);
            this.curIdx=index;
        },
    }

});

Answer 2

event.target 是你想要的东西

Answer 3

<div :class={active: isClass} @click="handleClick"></div>

data: {
  isClass: false
},
methods: {
  handleClick () {
    this.isClass = true
  }
}

当你点击的时候，className为active的样式就绑定上去了