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

我的密码笔链接

导出默认值{ 资料{ 返回{ 扩展：错， }; }, 方法：{ var checkList=document.getElementById'list1'； checkList.getElementsByClassName'anchor'[0]。onclick=functionevt{ if checkList.classList.包含“可见” 检查表。类列表。删除“可见”； 其他的 检查表。类列表。添加“可见”； } }, }; var checkList=document.getElementById'list1'； checkList.getElementsByClassName'anchor'[0]。onclick=functionevt{ if checkList.classList.包含“可见” 检查表。类列表。删除“可见”； 其他的 检查表。类列表。添加“可见”；

---

} 下面是从普通JS到Vue2的代码

JS中的onclick事件可以转换为Vue中的@click checkList.getElementsByClassName'anchor'[0].onclick //到 精选水果 方法包含函数 使用扩展变量控制.visible类

---

绑定类引用：

以下是从普通JS到Vue2的代码

JS中的onclick事件可以转换为Vue中的@click checkList.getElementsByClassName'anchor'[0].onclick //到 精选水果 方法包含函数 使用扩展变量控制.visible类

---

绑定类参考：

以下是切换的完整答案，以及如何处理输入的数据绑定：

<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>

---

以下是切换的完整答案，以及如何处理输入的数据绑定：

<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>

---

将代码移动到已装入的函数：。但是看到您的代码，我认为您应该首先学习vue js的入门教程。在vuejs中使用GetElementsByCassName很少是一个解决方案。这可能反映了对框架的误解。请将代码移动到装入的函数：。但是看到您的代码，我认为您应该首先学习vue js的入门教程。在vuejs中使用GetElementsByCassName很少是一个解决方案。这可能反映了对框架的误解。

<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>