时间戳

首页 > 解决方案 > 如何使用 Vue 添加/删除带有两个按钮的样式

vue.js - 如何使用 Vue 添加/删除带有两个按钮的样式

问题描述

我有两个按钮“+”，“-”加应该显示块，减显示无。我在 vanilla js 中创建了 snipplet，但我不知道如何使它在 Vue.js 中工作。在 Vue 中，我得到了一个带有 + 的组件，它用 - 打开组件。减号应该关闭当前组件，其中 - 位于该组件内部，该组件打开 +。

var p = document.querySelector(".plus");
var m = document.querySelector(".minus");
var div = document.querySelector("div");

p.addEventListener("click", p => {
  div.style.display = "block";
});

m.addEventListener("click", m => {
  div.style.display = "none";
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button class="plus">+</button>
    <button class="minus">-</button>
    <div
      style="height: 500px; width: 500px; background-color: blueviolet; display: none"
    ></div>

    <script src="index.js"></script>
  </body>
</html>

标签： vue.js

解决方案

一个开始理解 vueJS 条件渲染的好地方是这里。

// In your index.js file 

var app = new Vue({
  el: '#app',
  data: {
    // create a data binding to display or hide the div
    displayDiv: false
  }
})
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button class="plus" @click="displayDiv = true">+</button>
      <button class="minus" @click="displayDiv = false">-</button>
      <!-- I added an addition button to toggle the display --> 
      <button class="toggle" @click="displayDiv = !displayDiv">Toggle</button>
      <div
        v-if="displayDiv"
        style="height: 500px; width: 500px; background-color: blueviolet;"
      ></div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="index.js"></script>
  </body>
</html>

或者，您可以使用动态 css动态添加或删除一个 css 类，该类在加载时隐藏 div 并且仅在按下“+”按钮时显示。

推荐阅读