云上舟

# 测试内容

分别用JS、vue，在页面上创建ul，及其元素下的50个li。要求给li添加函数，点击后背景色变蓝，再点击则还原。

# 题目详解

  1. js普通做法

    <!DOCTYPE html>

<body></body>

<script>
  /**
   * 普通做法
   */

  // 创建ul标签
  let ulEle = document.createElement("ul");

  // 为ul文本对象添加50个li子元素
  for (let i = 0; i < 50; i++) {
    let liEle = document.createElement("li");
    liEle.innerHTML = `第${i}个li`;

    // 为每一个迭代出的li添加点击事件
    liEle.addEventListener("click", (e) => {
      const { target } = e;
      const { tagName, style } = target;

      target.isClicked
        ? (target.isClicked = !target.isClicked)
        : (target.isClicked = true);
      tagName == "LI" &&
        (style.backgroundColor = target.isClicked ? "blue" : "white");
    });

    // 为ulEle添加liEle对象
    ulEle.appendChild(liEle);
  }

  // body文本对象下添加ul对象
  document.body.appendChild(ulEle);
</script>

  2. js事件委托做法

    <!DOCTYPE html>

<body></body>

<script>
  /**
   * 事件委托做法
  */

  // 创建ul标签
  let ulEle = document.createElement("ul");

  // 为ul文本对象添加50个li子元素
  for (let i = 0; i < 50; i++) {
    let liEle = document.createElement("li");
    liEle.innerHTML = `第${i}个li`;
    ulEle.appendChild(liEle);
  }

  // body文本对象下添加ul对象
  document.body.appendChild(ulEle);

  // 为ul添加点击事件
  ulEle.addEventListener("click", (e) => {
    const { target } = e;
    const { tagName, style } = target;

    target.isClicked
      ? (target.isClicked = !target.isClicked)
      : (target.isClicked = true);
        tagName == "LI" && (style.backgroundColor = target.isClicked ? "blue" : "white");
  });
</script>

  3. Vue做法

    <template>
  <div>
    <ul>
      <li v-for="(item, index) in 50" :key="{ index }" @click="toggleBlue">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script >
export default {
  methods: {
    toggleBlue(e) {
      const { target } = e;
      target.isClicked
        ? (target.isClicked = !target.isClicked)
        : (target.isClicked = true);

      target.style.backgroundColor = target.isClicked ? "blue" : "white";
    },
  },
};
</script>

<style>
</style>

← 前言 →