Vue切换div显示隐藏,多选,单选代码解析


Posted in Javascript onJuly 14, 2020

切换div显示隐藏

1)单个item下的部分dom结构,显示或隐藏切换,不会修改其它同级dom的显示/隐藏

template dom结构

<div class="list-item" v-for="(list,index) in jobList">
          <p class="job-name">{{list.jobName}}</p>
          <p class="job-info">
            <el-checkbox v-model="list.checked" @change="checkOne(index)"></el-checkbox>
            <span class="info">{{list.locationDesc}} {{list.minDegreeDesc}}及以上  {{list.minExp}}年以上 {{list.jobMinSalary}}-{{list.jobMaxSalary}}</span>
            <span class="time">发布时间:{{list.refreshTime}}</span>   
            <span class="desc" @click="toggle(index)">查看职位描述
              <i class="up"  v-if = "list.show"></i>
              <i class="down"  v-if = "!list.show"></i>
            </span>          
          </p>
          <div class="desc-info" v-if = "list.show">
            {{list.jobDesc}}
          </div>
        </div>

script js

<script>
import api from '@/axios/api'
export default {
  name: 'jobImport',
  data(){
    return{ 
      companyName:'',
      checkedAll:false, 
      isShow: true,
      checkedNum:0,
      num:'-1',
      jobList:[
        {name:"销售总监1"},
        {name:"销售总监2"},
        {name:"销售总监3"},
        {name:"销售总监4"},
        {name:"销售总监5"},
        {name:"销售总监6"},
        {name:"销售总监7"}
      ],}
    },
    mounted() {
      for(let key in this.jobList){
       this.jobList[key].checked = false;
       this.jobList[key].show = false;
      } 
    },

methods:{



toggle(index){
      
this.jobList[index].show = !this.jobList[index].show;
      
this.jobList.splice(index,1,this.jobList[index]); //当你利用索引直接设置一个项时,Vue 不能检测变动的数组,你可以使用 splice()解决
      }

  }
}

less 样式

.list-item{
          padding-top:20px;          
          .job-name{
            font-size:16px;
            color:#333333;
            font-weight: 800;
          }
          .job-info{
            margin-top: 12px;
            padding-bottom:20px;
            border-bottom: 1px dashed #eeeeee;
            font-size:14px;
            color:#333333;
            .info{
              margin-left: 10px;
            }
            .time{
              margin-left: 130px;
            }
            
          }
          .desc{
            float: right;
            color:#ff6500;
            cursor: pointer;
            .up{
              display: inline-block;
              margin-left: 12px;
              vertical-align: middle; 
              width: 11px;
              height: 6px;
              background: url("../img/icon_up.png") no-repeat;
             }
             .down{
              display: inline-block;
              margin-left: 12px;
              vertical-align: middle;
              width: 11px;
              height: 6px;
              background: url("../img/icon_down.png") no-repeat;
             }
          }
          .desc-info{
            padding: 12px; 
            background: #f8f9fb;
          }
        }

2)单个item,显示或隐藏切换,会修改其它同级dom的显示/隐藏。利用vue的计算属性computed 单选,单击选中,选中后,再点击无法取消

template dom结构

choosed 选中样式

span{
            display: inline-block; 
            padding-left:10px;
            padding-right: 10px;
            margin-bottom: 10px;
            margin-left: 5px;
            margin-right: 5px;
            min-width:44px;
            height:26px;
            text-align: center;
            line-height: 26px;
            color:#333;
            font-size:14px; 
            cursor: pointer;
            &.choosed{
              background:#ff6500;
              border-radius:2px;
              color: #fff;
            }
          }
<div class="right hotcity-box">
  <span v-for="(city,index) in city" @click="handleChoose(index)" :class="{'choosed':cityNum == index}">{{city.cityName}}</span> </div>

script js

export default {
  name: 'search',
  data(){
      cityIndexNum:0,
      city:[
        {"cityName": '北京', "value": '1'},
      {"cityName": '上海', "value": '2'},
      
{"cityName": '广州', "value": '3'},
      
{"cityName": '深圳', "value": '4'},
      
{"cityName": '天津', "value": '5'}
       ]
    },
    methods:{
       handleChoose(index){ 
    

this.cityIndexNum = index;
       }     
    },
    computed:{
      cityNum(){
       return this.cityIndexNum;
      }
    }
}

2)单个item,显示或隐藏切换,会修改其它同级dom的显示/隐藏。 多选,单击选中,选中后,再点击,取消选中

template dom结构

 <div class="right more"> 
            <span v-for="(item, index) in exptIndustry" @click="handleChoose($event,index)" :class="{'choosed':item.ischeck}">{{item.fullName}}</span>
          </div>

js

data(){
    return {
       industryIndexNum:0,




 exptIndustry: [
                    {
                        "simpleName": "互联网1",
                        "fullName": "互联网1",
                        "value": "1",
                        "defaultName": "互联网1"
                    },







{
                        "simpleName": "互联网2",
                        "fullName": "互联网3",
                        "value": "2",
                        "defaultName": "互联网3"
                    }





]


    }
},
methods:{
  handleChoose(e,index){ //再次点击,取消选中状态
          if (e.target.className.indexOf("choosed") == -1) {
            e.target.className = "choosed"; //切换按钮样式 
          } else {
            e.target.className = "";//切换按钮样式 
          }
          if(index==-1){
            this.industryDataInit();
          }else{
            let check = this.exptIndustry[index].ischeck;
            this.exptIndustry[index].ischeck = !check; 
            console.log(this.exptIndustry[index].ischeck)
          } 
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
js打造数组转json函数
Jan 14 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 #Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 #Javascript
详解javascript void(0)
Jul 13 #Javascript
Vue组件间数据传递的方式(3种)
Jul 13 #Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 #Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 #Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
jQuery使用方法
2017/02/04 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
elementUI多选框反选的实现代码
2019/04/03 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Python计算两个日期相差天数的方法示例
2017/05/23 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python subprocess库的使用详解
2018/10/26 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
财务管理专业自荐信范文
2013/12/24 职场文书
交通事故调解协议书
2014/04/16 职场文书
党校毕业心得体会
2014/09/13 职场文书
大学生暑期实践报告
2015/07/13 职场文书
公司备用金管理制度
2015/08/04 职场文书
给学校的建议书400字
2015/09/14 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫