如何使用 js 代码在 vuejs 中编写方法？答案

【问题标题】：How to write method in vuejs using js code?如何使用 js 代码在 vuejs 中编写方法？
【发布时间】：2021-05-05 16:03:18
【问题描述】：

我的codepen链接https://codepen.io/santoshch/pen/LYWPMQy

export default {



    data() {
        return {
            expanded: false,
        };
    },




    methods: {

        var checkList = document.getElementById('list1');
        checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
          if (checkList.classList.contains('visible'))
            checkList.classList.remove('visible');
          else
            checkList.classList.add('visible');
        }

    },
};

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
}

在尝试将 js 代码转换为 vuejs 时遇到问题。在我尝试编写js代码的方法中。但出现错误。

【问题讨论】：

将你的代码移动到挂载的函数中：v3.vuejs.org/api/options-lifecycle-hooks.html#mounted。但是看到你的代码我觉得你应该先上一篇vue js的介绍教程。在 vuejs 中使用 getElementsByClassName 很少是一个解决方案。这可能反映了对框架的误解。

标签： javascript vue.js

【解决方案1】：

这是从普通 JS 到 Vue2 的代码 https://codesandbox.io/s/peaceful-http-2n9y7?file=/src/components/SelectionBox.vue

JS中的onclick事件可以翻译成Vue中的@click

checkList.getElementsByClassName('anchor')[0].onclick
// to
<span class="anchor" @click="anchorOnClick">Select Fruits</span>

方法包含函数

methods: {
   // function
   anchorOnClick: function (event) { 
     // do something
   }
}

使用expanded变量控制.visible类

<div
    class="dropdown-check-list"
    :class="{ visible: expanded }" // binding class
    tabindex="100"
>
   ....
</div>


anchorOnClick: function (event) { 
    this.expanded = !this.expanded;
}

绑定类参考：https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes

【讨论】：

【解决方案2】：

这里是关于切换以及如何处理输入数据绑定的完整答案：

<template>
  <div>
    <div id="list1" class="dropdown-check-list" tabindex="100" :class="fruitsListvisible ? 'visible' : ''">
      <span class="anchor" @click="toggleFruitList">Select Fruits</span>
      <ul class="items">
        <li><label for="Apple"><input v-model="selectedFruits" id="Apple" value="Apple" type="checkbox" />Apple</label></li>
        <li><label for="Orange"><input v-model="selectedFruits" id="Orange" value="Orange" type="checkbox" />Orange</label></li>
        <li><label for="Grapes"><input v-model="selectedFruits" id="Grapes" value="Grapes" type="checkbox" />Grapes </label></li>
        <li><label for="Berry"><input v-model="selectedFruits" id="Berry" value="Berry" type="checkbox" />Berry </label></li>
        <li><label for="Mango"><input v-model="selectedFruits" id="Mango" value="Mango" type="checkbox" />Mango </label></li>
        <li><label for="Banana"><input v-model="selectedFruits" id="Banana" value="Banana" type="checkbox" />Banana </label></li>
        <li><label for="Tomato"><input v-model="selectedFruits" id="Tomato" value="Tomato" type="checkbox" />Tomato</label></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruitsListvisible: false,
      selectedFruits: [],
    };
  },
  methods: {
    toggleFruitList() {
      this.fruitsListvisible = !this.fruitsListvisible;
    },
  },
};
</script>

<style scoped>
  .dropdown-check-list {
    display: inline-block;
  }
  .dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid #ccc;
  }
  .dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
  }
  .dropdown-check-list ul.items {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
  }
  .dropdown-check-list ul.items li {
    list-style: none;
  }
  .dropdown-check-list.visible .anchor {
    color: #0094ff;
  }
  .dropdown-check-list.visible .items {
    display: block;
  }
</style>

https://codepen.io/jeremykenedy/pen/yLMBwBP

【讨论】：