有没有一种方法可以在Vue.js中动态插入单击事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (1353)

尝试实现将一些计算方法插入到元素上,这仅取决于移动视图。下面是我工作的基本要点:

<a class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTopicClicked($event, m, t)" href="#">{{t.title}}</a>

<script>

export default {
    data() {
        return {
            isClosed: false
        }
    },
    computed: {
        toggleMenu() {
            return {
                isClosed: this.isClosed
            }
        }
    },
    watch: {
        browserWidth(prevWidth, newWidth) {
            console.log('width changed from ' + newWidth + ' to ' + prevWidth);
    },
    mounted() {
        var that = this;
        this.$nextTick(function() {
            window.addEventListener('resize', function(e) {
                that.browserWidth = window.innerWidth;
                if(that.browserWidth > 824) {
                    console.log('Desktop View');
                } else {
                    console.log('Mobile View');
                }
            })
        })
    }
}
</script>

我想尝试使用调整大小事件来确定浏览器的宽度,这样我就可以动态地将计算的函数插入到<a>标签

提问于
用户回答回答于

你可以添加一个数据,显示视图是否可移动,并使用v-if、v-ell,并让@Click只添加到v-if=“isMobileView”中。

<a v-if="isMobileView" class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTopicClicked($event, m, t)" href="#">{{t.title}}</a>

<a v-else class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} href="#">{{t.title}}</a>

<script>

export default {
    data() {
        return {
            isClosed: false,
            isMobileView: false
        }
    },
    computed: {
        toggleMenu() {
            return {
                isClosed: this.isClosed
            }
        }
    },
    watch: {
        browserWidth(prevWidth, newWidth) {
            console.log('width changed from ' + newWidth + ' to ' + prevWidth);
    },
    mounted() {
        var that = this;
        function checkIfMobileView() {
            that.isMobileView = window.innerWidth <= 824;
        }
        this.$nextTick(function() {
            window.addEventListener('resize', checkIfMobileView);
        });
        checkIfMobileView();
    }
}
</script>

扫码关注云+社区

领取腾讯云代金券