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

<div class="status_button"><el-button type="success" @click="checkSite" >查岗</el-button><el-button type="danger&quot

树沙&

22509人浏览 · 2018-06-25 16:45:02

树沙& · 2018-06-25 16:45:02 发布

 
  < 
  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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^