vue经典思想(排他思想,全选框思想)

最新推荐文章于 2023-09-26 13:48:48 发布

码农小嘉

最新推荐文章于 2023-09-26 13:48:48 发布

阅读量1k

点赞数 1

分类专栏：对象文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38806666/article/details/128129089

版权

对象专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.排他思想

/* 排他思想：多个元素只能选中一个（多选一）

1.以前dom思维： DOM操作

(1)使用选择器找到当前选中的元素，移除类名

(2)给自己添加类名

2.vue思维 : 数据驱动(数据+指令)

(1)给data添加一个变量currentIndex记录当前选中的下标

(2)使用v-bind指令绑定样式

(2)点击元素修改

*/

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导包 -->
  <script src="./vue.js"></script>
  <style>
    .active {
      background-color: pink;
    }
  </style>
</head>

<body>
  <!-- HTML结构 -->
  <div id="app">
    <button v-for="(item,index) in list" :key="index" 
    :class="{active: index===currentIndex}"
    @click="currentIndex=index">{{item}}</button>
  </div>

  <script>
    /* 创建vue实例 */
    let app = new Vue({
      //el:挂载点
      el: "#app",
      //data: 要渲染的数据
      data: {
        currentIndex: 0,
        list: [
          "前端",
          "后端",
          "测试",
          "大数据"
        ]

      },
      //methods: 事件处理函数
      methods: {}
    })
  </script>
</body>

</html>

2.全选框思想

全选框思想是对于true和false的操作

注意点表单的双向绑定 v-model="item.select" 当表单的v-true值改变的时候数组的v-true随之改变另外当数组中的v-true值改变表单v-true值也随之改变 (简单来说就是打钩)

1.// every: 判断数组中是否每一个元素都满足条件

2. // 修改数组每一个元素的select值为 value

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 导包 -->
  <script src="./vue.js"></script>
</head>

<body>

  <!-- HTML结构 -->
  <div id="app">
    全选<input type="checkbox" v-model="allCheck">
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <input type="checkbox" v-model="item.select"> <label for="">{{ item.name }}</label>
      </li>
    </ul>
  </div>

  <script>
    /* 创建vue实例 */
    var app = new Vue({
      //el:挂载点
      el: '#app',
      //data: 要渲染的数据
      data: {
        list: [
          { name: '前端', select: false },
          { name: 'UI', select: false },
          { name: 'Java', select: false },
          { name: 'php', select: false },
          { name: 'python', select: false },
          { name: 'c', select: false },
          { name: '测试', select: false },
          { name: '产品', select: false },
        ]
      },
      //计算属性
      computed: {
        //全选的绑定
        allCheck: {
          get () {
            return this.list.every(item => item.select)
          },
          set (value) {
            console.log(value)
            // 修改数组每一个元素的select值 为 value
            this.list.forEach(item=>item.select = value)
          }
        }
        // allCheck(){
        //   // every: 判断数组中是否每一个元素都满足条件
        //   return this.list.every(item=>item.select)
        // }
      }
    })
  </script>
</body>

</html>