帅哥美女走一走案例

小凡爱睡觉
143 阅读1分钟

帅哥美女走一走案例

目标: 点击按钮，改变3个li的顺序，在头上的就到末尾

提示 操作数组里的顺序，v-for就会重新渲染li

无序 ul

1 遍历数组数据 v-for 遍历 key="item"给于li的唯一性 2 按钮添加点击事件 3 添加每次点击时，触发事件 // 头部数据加入到末尾 this.arr.push(this.arr[0]) // 再把头部的数据删除掉 this.arr.shift()

1 代码解释:

v-for 遍历数据 item in arr数组

  • {{ item }}
    • 这段代码是 Vue.js 模板语法，它使用了 v-for 指令来循环遍历一个 数组 arr 中的每个元素 item，并将每个元素渲染为一个 li 标签。 其中，:key="item" 是为了给每个 li 元素提供一个唯一的 key 值， 以便 Vue.js 能够高效地跟踪它们的变化。{{ item }} 则是插值 表达式，用于将 item 的值插入到 li 标签中。

    2 代码解释:

            go() {     // 回调函数
          // 头部数据加入到末尾
          this.arr.push(this.arr[0])
          // 再把头部的数据删除掉
          this.arr.shift()
        }
      },

    这是一个名为"go"的方法，其中包含一个回调函数。

    代码执行以下步骤：

    使用'push'方法将'arr'数组的第一个元素添加到末尾。 使用'shift'方法删除'arr'数组的第一个元素。 换句话说，该代码通过将第一个元素移动到末尾并从原始位置删除它来旋转数组中的元素。

    代码如下:

    <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
     
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <button @click="go">走一走</button>
    <!-- 给予 button 添加点击事件 -->
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        arr: ["帅哥", "美女", "程序猿"]
        //  传参  数组
      },
      //  methods 定义方法
      methods: {
        go() {     // 回调函数
          // 头部数据加入到末尾
          this.arr.push(this.arr[0])
          // 再把头部的数据删除掉
          this.arr.shift()
        }
      },
    })
  </script>
</body>
</html>
    avatar
    文章
    阅读
    粉丝