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透传Attributes使用解析

    Vue透传Attributes使用解析

    本文主要介绍了Vue透传Attributes使用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 前端token中4个存储位置的优缺点说明

    前端token中4个存储位置的优缺点说明

    这篇文章主要介绍了前端token中4个存储位置的优缺点说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 基于Vue2的独立构建与运行时构建的差别(详解)

    基于Vue2的独立构建与运行时构建的差别(详解)

    下面小编就为大家分享一篇基于Vue2的独立构建与运行时构建的差别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作

    vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作

    这篇文章主要介绍了vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 使用Vue3创建多布局系统的三种方法

    使用Vue3创建多布局系统的三种方法

    布局是中大型网站或应用的基础,假设你正在创建一个网页应用,它包括主页、营销页面和应用页面,你不会想要为每一页重复所有的工作,对吧,与Nuxt不同,Vue 3并没有内置的布局系统,但是别担心,这里将向你展示3种简单的方法来实现这一点,需要的朋友可以参考下
    2023-08-08
  • Vue中$attrs和$listeners详解以及使用方法

    Vue中$attrs和$listeners详解以及使用方法

    最近在研究Vue的组件库,之前也用过$attrs和$listeners,官方文档描述的不太详细,也没有太好的例子,下面这篇文章主要给大家介绍了关于Vue中$attrs和$listeners详解以及使用的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue router错误跳转到首页("/")的问题及解决

    Vue router错误跳转到首页("/")的问题及解决

    这篇文章主要介绍了Vue router错误跳转到首页("/")的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue2 使用@vue/composition-api依赖包 编译、打包各种报错问题分析

    vue2 使用@vue/composition-api依赖包 编译、打包各种报错问题分析

    由于package.json 文件中 vue、vue-template-compiler 版本号前面 多了个 ^ 导致实际导入时,node_module中的 vue 版本可能被升级为 2.7.x,这篇文章主要介绍了vue2 使用@vue/composition-api依赖包 编译、打包各种报错问题分析,需要的朋友可以参考下
    2023-01-01
  • 解决vue3.0运行项目warning Insert `·` prettier/prettier问题

    解决vue3.0运行项目warning Insert `·` prettier/pret

    这篇文章主要介绍了解决vue3.0运行项目warning Insert `·` prettier/prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue实现评论列表功能

    vue实现评论列表功能

    本文通过实例代码给大家介绍了vue实现评论列表功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-10-10

最新评论