vue中使用v-if,v-else来设置css样式的步骤

 更新时间:2023年03月04日 10:16:55   作者:浩星  
我们在使用vue项目开发时,v-if是使用的非常多的,在这里我们谈谈如何使用v-i来绑定修改css样式,使用的主要是双向数据绑定,即通过改变他的状态来改变他的样式,这篇文章主要介绍了vue中如何使用v-if,v-else来设置css样式,需要的朋友可以参考下

推荐阅读:

Vue的v-if和v-show的区别图文介绍

        我们在使用vue项目开发时,v-if是使用的非常多的,在这里我们谈谈如何使用v-i来绑定修改css样式,使用的主要是双向数据绑定,即通过改变他的状态来改变他的样式,来个实例说明下:

第一步:

        主要使用的是三元判断的方式(需要改变的div里使用),并设置好点击事件

                状态?“第一个class名”:“第二个class名”

第二步:

        在javascript部分,设置默认属性,设置点击事件

                quxiaoTit:true

第三步:

        在css部分设置它的改变前样式和改变后样式

        我这里是使用的定位,改变他先后的定位的不同

到此这篇关于vue中如何使用v-if,v-else来设置css样式的文章就介绍到这了,更多相关vue 使用v-if,v-else设置css样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中自定义右键菜单插件

    vue中自定义右键菜单插件

    这篇文章主要为大家详细介绍了vue中自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • elementPlus表格二次封装过程

    elementPlus表格二次封装过程

    我们正常在开发项目中,表格的风格是一致的,但是表格或多或少会有些不同,有些是需要分页,有些是按钮功能不同,有些又需要加Tag,或者对时间进行格式化等,这篇文章主要介绍了elementPlus表格二次封装过程,需要的朋友可以参考下
    2024-07-07
  • Vue MVVM模型与data及methods属性超详细讲解

    Vue MVVM模型与data及methods属性超详细讲解

    MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码(代码隐藏),更好地促进视图层开发与模式其余部分的分离,这篇文章主要介绍了Vue MVVM模型与data及methods属性
    2022-10-10
  • VUE利用vuex模拟实现新闻点赞功能实例

    VUE利用vuex模拟实现新闻点赞功能实例

    本篇文章主要介绍了VUE利用vuex模拟实现新闻点赞功能实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 浅谈Vue3的几个优势

    浅谈Vue3的几个优势

    这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧
    2021-10-10
  • 解决echarts 一条柱状图显示两个值,类似进度条的问题

    解决echarts 一条柱状图显示两个值,类似进度条的问题

    这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • VUE3+Element-plus中el-form的使用示例代码

    VUE3+Element-plus中el-form的使用示例代码

    这篇文章主要介绍了VUE3+Element-plus中el-form的使用示例代码,本文通过图文示例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • Vue如何用this.$set改变数组里的某个值

    Vue如何用this.$set改变数组里的某个值

    这篇文章主要介绍了Vue用this.$set改变数组里的某个值,文中通过示例代码介绍了vue中this.$set()的用法----更新数组和对象的值,需要的朋友可以参考下
    2022-12-12
  • Vue+Element UI实现复制当前行数据的功能

    Vue+Element UI实现复制当前行数据的功能

    这篇文章主要介绍了如何使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,感兴趣的小伙伴可以参考下
    2023-11-11
  • Vue应用部署到服务器的正确方式

    Vue应用部署到服务器的正确方式

    本篇文章主要介绍了详解Vue应用部署到服务器的正确方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-07-07

最新评论