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 动画基础教程
Dec 25 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
jquery 插件开发备注
Aug 27 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
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
jQuery 选择器理解
2010/03/16 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JavaScript DOM事件(笔记)
2015/04/08 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python守护进程用法实例分析
2015/06/04 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python实现视频读取和转化图片
2019/12/10 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
怎么写工作检讨书
2014/11/16 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书