文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue如何设置动态的栅格占位、水平偏移量、类名、样式

2024-04-02 19:55

关注

设置动态的栅格占位、水平偏移量、类名、样式

根据需求,有些样式需要在特定情况下触发,有的占位需要在特殊条件下展示,

vue中设置动态如下 

代码:

<template>
  <a-row style="border: 1px solid">
    <a-col
      :span=" bool1 ? '6' : '10'"
      :offset=" bool1 ? '6' : '2'"
      :class="{ 'left-style': bool1, 'right-style':!bool1 }"
      :style="{ paddingRight: bool1 ? '10px' : '50px'}"
    >
      <div class="test-active"></div>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'Self',
  data () {
    return {
      bool1: false
      }
  }
}
</script>

<style scoped>
.test-active {
  width: 100%;
  height: 200px;
  border: 1px solid blueviolet;
}
.left-style {
  background-color: pink;
}
.right-style {
  background-color: skyblue;
}
</style>

效果:

注解:

bool1为false,则占10位,并且水平方向偏移2位,类名right-style起作用,paddingRight为50px起作用

vue动态控制样式

在vue项目开发中,我们经常会通过给元素动态的添加动态样式以实现选中的效果。通过动态的添加style和class达到动态更改样式的效果。

动态添加class名

主要列举了三种方法,欢迎补充,

第一种:简单的根据表达式去判断样式的显示,对象的形式。

第二种:根据三目表达式来进行class的动态切换,不能写成对象的形式,不然会报错。

第三种:相当于前两种的扩展,举例一个场景便于大家理解,一个多选项,我要点击的时候显示高亮的效果,那我们肯定需要拿到我们点击后的标识,将其放在一个数组中,然后去遍历的时候通过find方法判断数组中是否以及有这个值了,有的话进行样式的添加。欢迎沟通哈,可能举例不太明了

<template>
  <div class="home">
    <!-- 写法一:对象形式,用于指定单个样式是否切换-->
    <!-- <div :class="{select:num>=10}">动态样式切换</div> -->
    <!-- 写法二:用于指定多个样式切换 -->
    <!-- <div :class="[num>=10?'select':'noselect']" >动态样式切换</div> -->
    <!-- 写法三:复杂化的写法 -->
    <!-- <div :class="{select:arr.filter(item=>item).length>5}">动态样式切换</div> -->
    <!-- <div :class="[arr.find(item=>item===4)?'select':'noselect']" >动态样式切换</div> -->
    <div>动态样式切换</div>
    <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
  <h3>实现当num大于10时头部问题变成红色</h3>
  
  </div>
</template>
<script>
export default {
  name: 'Home',
  data(){
    return{
      num:1,
      arr:[1,2,3,4,5,6]
    }
  }
}
</script>
<style>
  button{
    padding: 5px;
    background: #f5f5f5;
    margin:10px ;
}
.select{
  color: red;
}
.noselect{
  color: blue;
}
</style>

动态更改style样式

适用场景:解决手机页面场景的适配问题,比如:苹果手机有个下面的横杠占位,所以我们要添加对应的margin(苹果手机最底部元素添加padding不生效)

<template>
  <div class="home">
    <!-- 动态设置style -->
    <div :style="{color:num>=10?'red':'blue'}">动态样式切换</div>
    <div>{{num}}<button @click="num++">+</button><button @click="num--">-</button></div>
  <h3>实现当num大于10时头部问题变成红色</h3>
  
  </div>
</template>
<script>
export default {
  name: 'Home',
  data(){
    return{
      num:1,
      arr:[1,2,3,4,5,6]
    }
  }
}
</script>
<style>
  button{
    padding: 5px;
    background: #f5f5f5;
    margin:10px ;
}
.select{
  color: red;
}
.noselect{
  color: blue;
}
</style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯