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 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
js进行表单验证实例分析
Feb 10 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 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判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
js function使用心得
2010/05/10 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
python实现简单的五子棋游戏
2020/09/01 Python
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
个人自我鉴定范文
2013/10/04 职场文书
索桥的故事教学反思
2014/02/06 职场文书
法定代表人授权委托书
2014/04/04 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
python基础详解之if循环语句
2021/04/24 Python
详解Python类和对象内容
2021/06/22 Python