在vue中动态添加class类进行显示隐藏实例

如下所示：

<div class="status_button">
       <el-button type="success" @click="checkSite" >查岗</el-button>
       <el-button type="danger">视频</el-button>
     </div>
     <!-- 查岗部分显示影藏 -->
     <div class="check_button" :class="[this.flag?'show':'hidden']">
      <ul class="cl">
       <li>用xinhic</li>
       <li>xin231</li>
      </ul>
     </div>

通过点击按钮进行显示隐藏

data() {
  return {
   flag: false,
  }
 },
 methods: {
  getdata() {
   this.$axios.post('http://yapi.xxxxxxx').then( res => {
    console.log(res)
   })
  },
  checkSite() {
   this.flag = !this.flag
  }
 }

三元表达式需要写在数组中 点击按钮的时候需要改变flag的状态 这里的flag相当于一个开关

以上这篇在vue中动态添加class类进行显示隐藏实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue添加class样式实例讲解

    vue提供了一个动态添加class的v-bind:class(:class) 对象,可以使用:class进行clas动态的切换.案例中将通过使用:class设置 字体为红色. 1.新建一个html代码页面. 2.在html代码页面创建一个<div>同时添加id为app,并添加一段文本 3.引入vue.js文件.使用<scrtip>标签引入vue文件. 4.创建vue实例.新建一个<script>标签,然后使用new Vue()创建实例. 代码: <script&g

  • vue--点击当前增加class,其他删除class的方法

    如下所示: <div id="app"> <p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}}</p> </div> <script> new Vue({ el: '#app', data: { datas: { da

  • vue中动态添加class类名的方法

    vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1'

  • vue中v-for通过动态绑定class实现触发效果

    vue动态绑定class练习. :class="{ '类名1':条件表达式,'类名2':条件表达式- }" <template> <div class="app-*"> <ul> <li v-for="(item,i) of list" :key="i" class="item" @click="clickIndex=i" :class=&quo

  • vue实现动态显示与隐藏底部导航的方法分析

    本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 方式一: 1. 路由配置meta: {footShow: true, }, routes: [ { path: '/', name: 'home', redirect: '/home', // 默认路由添加class component: home, meta: { footS

  • 在vue中动态添加class类进行显示隐藏实例

    如下所示: <div class="status_button"> <el-button type="success" @click="checkSite" >查岗</el-button> <el-button type="danger">视频</el-button> </div> <!-- 查岗部分显示影藏 --> <div class

  • 详解如何在Vue中动态添加类名

    目录 静态和动态类 有条件的类名 使用数组语法 使用对象语法 与自定义组件一起使用 快速生成类名 使用计算属性来简化类 能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:

  • vue中改变选中当前项的显示隐藏或者状态的实现方法

    在vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下: 当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了element-ui,那么操作起来会比较简单一些,这样设置: v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)" js中:

  • vue中动态添加style样式的几种写法总结

    目录 vue动态添加style样式总结 对象 数组 三目运算符 多重值(浏览器会根据运行支持情况进行选择) 绑定data对象 vue3的style样式的特性 scoped 属性 在 scoped 内部,写全局的样式 通过v-bind 函数,在 CSS 中使用 JavaScript 中的变量 vue动态添加style样式总结 项目中可能会需要动态添加 style 行内样式,但是在长期维护的项目里面,尽量要避免使用. 注意: 1.凡是有 - 的style属性名都要变成驼峰式,比如font-size要

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • Android ListView中动态添加RaidoButton的实例详解

    Android ListView中动态添加RaidoButton的实例详解 这里讲解的内容是:从数据库中取得数据,将这些数据的value值赋值给Radiobutton的text属性,将这些数据的key值赋值给radiobutton的key值.同时实现点击一整行,更换radiobutton选择. XML代码:主要是添加一个ListView控件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&q

  • 基于Android在布局中动态添加view的两种方法(总结)

    一.说明 添加视图文件的时候有两种方式:1.通过在xml文件定义layout:2.java代码编写 二.前言说明 1.构造xml文件 2.LayoutInflater 提到addview,首先要了解一下LayoutInflater类.这个类最主要的功能就是实现将xml表述的layout转化为View的功能.为了便于理解,我们可以将它与findViewById()作一比较,二者都是实例化某一对象,不同的是findViewById()是找xml布局文件下的具体widget控件实例化,而LayoutI

  • Vue实现动态添加或者删除对象和对象数组的操作方法

    添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); 删除核心代码如下: /*遍历数组,然

  • vue中Axios添加拦截器刷新token的实现方法

    目录 1. Axios基本用法: 2. Axios基本封装用法: 3. 添加拦截器的用法 4. 注意事项: Axios是一款网络前端请求框架,基本用法如下: 1. Axios基本用法: const response = await Axios.create({ baseURL: "https://test.api.com", headers: { 'Content-Type': 'application/json', }, }).post<RequestResponse>(

随机推荐