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

 更新时间:2020年07月14日 10:03:58   作者:小小——开心  
这篇文章主要介绍了Vue切换div显示隐藏,多选,单选代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

切换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)
          } 
  }
}

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

相关文章

  • Vue简单封装axios网络请求的方法

    Vue简单封装axios网络请求的方法

    这篇文章主要介绍了Vue简单封装axios网络请求,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,对Vue封装axios网络请求相关知识感兴趣的朋友一起看看吧
    2022-11-11
  • 优化Vue template中大量条件选择v-if的方案分享

    优化Vue template中大量条件选择v-if的方案分享

    本文我们将给大家详细的讲解一下如何优化Vue template 中的大量条件选择v-if,文中通过代码示例介绍的非常详细,有详细的优化方案,感兴趣的朋友可以参考阅读下
    2023-07-07
  • vue v-for 使用问题整理小结

    vue v-for 使用问题整理小结

    使用v-for指令的时候遇到一个错误问题,具体错误代码在文章给大家列出,对vue v-for使用问题感兴趣的朋友跟随小编一起学习吧
    2019-08-08
  • 浅谈vue的踩坑路

    浅谈vue的踩坑路

    下面小编就为大家带来一篇浅谈vue的踩坑路。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue中v-mode详解及使用示例详解

    vue中v-mode详解及使用示例详解

    这篇文章主要介绍了vue中v-mode详解以及具体的使用示例,在组件中使用 v-model 时,需要定义model选项,指定绑定的prop和事件,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue2之简易的pc端短信验证码的问题及处理方法

    vue2之简易的pc端短信验证码的问题及处理方法

    这篇文章主要介绍了vue2之简易的pc端短信验证码的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue用FileSaverJs导出文件

    vue用FileSaverJs导出文件

    FileSaver.js 是在客户端保存文件的解决方案,非常适合 在客户端上生成文件的 Web 应用,它是 HTML5 版本的 saveAs() FileSaver 实现,这篇文章主要介绍了vue用FileSaverJs导出文件,需要的朋友可以参考下
    2023-09-09
  • vue实现点击出现操作弹出框的示例

    vue实现点击出现操作弹出框的示例

    这篇文章主要介绍了vue实现点击出现操作弹出框的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11
  • 利用Vue.js指令实现全选功能

    利用Vue.js指令实现全选功能

    最近做了两个vue的项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便。下面就来介绍如何利用指令来实现全选。
    2016-09-09
  • vue如何集成raphael.js中国地图的方法示例

    vue如何集成raphael.js中国地图的方法示例

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。本文就给大家介绍了关于利用vue集成raphael.js中国地图的相关资料,需要的朋友可以参考下。
    2017-08-08

最新评论