基本的 onclick javascript jquery 代码到 Vue答案

【问题标题】：Basic onclick javascript jquery code to Vue基本的 onclick javascript jquery 代码到 Vue
【发布时间】：2017-02-18 15:58:10
【问题描述】：

我习惯了 jquery，我正在将我的代码重写为 Vue。在这个基本的 onclick 事件上需要一点帮助。

原始html：

<div id="main">

    <div id="right-nav" onclick="closeRightNav();"></div>

    <i onclick="openRightNav();"></i>

</div>

原始javascript：

function openRightNav() {
    $("#right-nav").width("100%");
}

function closeRightNav() {
    $("#right-nav").width("0");
}

这是我目前所在的位置：

新的html：

<div id="main">

    <div id="right-nav" @click="closeRightNav"></div>

    <i @click="openRightNav"></i>

</div>

使用 Vue 的新 javascript：

var app = new Vue({
    el: '#main',

    data: {
        width: '100%'
    },

    methods: {
        openRightNav() {
            $("#right-nav").width("100%"); // not sure how to write this part in Vue?
        }
    }
});

如何在 Vue 中正确编写？

【问题讨论】：

具体哪一部分不适合您？
我正在将我的 jquery 代码重写为 Vue，因此它以数据为中心 (Vue) 而不是以 DOM 为中心 (jquery)。

标签： javascript jquery vuejs2 vue.js

【解决方案1】：

好的。你可以从多个角度来解决这个问题。我喜欢像这样使用 v-show 或 v-if 指令：

<template>
  <div>
    <div v-if="rightOpen" id="right-div" style="width:100%">Right Div</div>
    <a @click="rightOpen = ! rightOpen">Toggle</a> // this will actually toggle right sidebar open and close
  </div>
</template>

<script>
  export default {
    mounted() {
    },
    data: function() {
      return {
        rightOpen: false
      }
    }
  }
</script>

现在您可以使用 v-show 代替 v-if 区别在于 v-show 元素将在页面上呈现但不显示，而 v-if 将不呈现元素。

你也可以像这样使用 v-class

...
<div :class="{ 'someClass': !rightOpen,'sidebar-opened': rightOpen}" id="right-div">Right Div</div>
....

在本例中，someClass 将是在渲染组件时加载的类，假设 width: 0 将在该类中。侧边栏打开的类应包含宽度：100%。其他一切都与上一个示例保持一致。

【讨论】：

^ 这就是我的做法。

【解决方案2】：

在openRightNav 中，您更改数据并且不直接操作DOM。用你的方法说：this.width = 100。

在您的 html 中，您需要像这样绑定 width 属性：

<div id="right-nav" @click="closeRightNav" v-bind:style="{'width': width + '%'}"></div>

不要忘记将 width 的默认值设置为 0。

在closeRightNav 你只会写：this.width = 0

【讨论】：

是否可以有多个 var a1 = new Vue({ el: '#main' }); var a2 = new Vue({ el: '#main' }); var a3 = new Vue({ el: '#main' });等等针对相同的元素？
我不会那样做的:)

【解决方案3】：

感谢 Yousef Kama，这就是我最终做到的方式：

新的html：

<div id="main">

    <div id="right-nav" @click="closeRightNav" v-bind:style="{'width': width + '%'}"></div>

    <i @click="openRightNav"></i>

</div>

新的 Vue javascript：

var app = new Vue({
    el: '#main',

    data: {
        width: 0
    },

    methods: {
        openRightNav() {
            this.width = 100;
        },

        closeRightNav() {
            this.width = 0;
        }
    }
});

【讨论】：