Question

我习惯于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中正确写入？

Answer 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％。其他所有内容都与前一个示例保持一致。

Answer 2

在openRightNav中您更改了数据并且不直接操纵DOM。只需在您的方法中说：this.width = 100。

在你的HTML中

然后你需要绑定你的width属性：

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

请勿忘记将width的默认值设置为0。

在closeRightNav {p>你只能写：this.width = 0

Answer 3

感谢Yousef Kama，我最终是这样做的：

新的HTML：

<div id="main">

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

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

</div>

New Vue javascript：

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

    data: {
        width: 0
    },

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

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

基本的onclick javascript jquery代码到Vue

3 个答案: