在vue.js中如何写jq语句

问题描述

问 题

想写这种语句,鼠标移动到.xxx显示.yyy,放在什么地方?ready()里面已经写初始$('.yyy').hide()了

$('.xxx').mouseenter(function(){
    $('.yyy').toggle()})

解决方案

加了jq就感觉好痛苦，不过还是说说吧：

<div class="xxx" v-on:mouseenter="toggleY" ><div>

export default {
    methods: {
        toggleY: function(){
            $('.yyy').toggle()});
        }
    }
}

补充：

如果不用jq，仅靠vue，可以这么写：

<div class="xxx" v-on:mouseenter="toggleY" v-show="needShow"><div>

export default {
    data: function(){
        return {
            needShow: true
        };
    },
    methods: {
        toggleY: function(){
            this.needShow = !this.needShow;
        }
    }
}

为什么vue叫响应式？这种靠数据变化来驱动UI更新的方式，就可以叫响应式(程序足够聪明，我只要告诉他我想要什么，譬如：needShow，程序自己知道要做什么，该怎么做！)。jq的那套$('.yyy').toggle()，就是命令式(意思是程序足够傻，我必须告诉他怎么做！)

这篇关于在vue.js中如何写jq语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！