首页 > 其他分享 >关于vue :style 的几种使用方式

关于vue :style 的几种使用方式

时间:2023-01-09 11:48:46浏览次数:40  
标签:style vue title 几种 使用 con

:style的使用

一 ,最通用的写法 

<p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>

二, 三元表达式

<a :style="{color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" target="_self">{{con.subTitle}}</a>

 一和二 可以联合起来写 如下

<p :style="{fontFamily:arr.conFontFamily,fontSize:(arr.conFontSize!=0.36?arr.conFontSize+arr.conFontUnit:''),color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>

 

标签:style,vue,title,几种,使用,con
From: https://www.cnblogs.com/bisiyuan/p/17036537.html

相关文章

  • Vue的hash/history模式
    hash路由模式URL中的hash值只是客户端的一种状态,向服务端发送请求的时候,hash部分不会被发送;hash值得改变会在浏览器的历史记增加访问记录,所以可以通过浏览器的回退......
  • vue3+vite2 vite.config.js 配置
    vite配置官方文档:https://cn.vitejs.dev/config/shared-options.html#base 开发服务器选项-serverserver:{//host:指定服务器应该监听哪个ip地址。如果设置为......
  • vue2 element-ui组件二封-表单组件-按钮封装
    这里是一段我们公司过往项目的代码(增删改查项目中的查询/重置按钮)<el-button@click="query()"type="primary"size="mini"><iclass="el-icon-search">查询</i><......
  • vue2组件props;computed监控变量,watch执行方法
    props:{mesData:{type:Object,//接受父组件值required:true,},tableLod:{type:Function,......
  • vue项目部署到IIS服务器
    步骤一:复制文件把build之后的文件(dist文件夹)拷贝到IIS存放网站文件的目录步骤二:在IIS中新建站点步骤三:下载安装模块:urlrewrite传送门:https://www.iis.net/downloads/m......
  • 前端 vue 静态页面
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=......
  • 手写获取手机验证码按钮-适用vue,uniapp
    template<uni-forms-itemlabel="验证码"name="code"style="position:relative;"><inputmaxlength="6"type="number......
  • 每日一题之Vue的异步更新实现原理是怎样的?
    最近面试总是会被问到这么一个问题:在使用vue的时候,将for循环中声明的变量i从1增加到100,然后将i展示到页面上,页面上的i是从1跳到100,还是会怎样?答案当然是只会显示100,并不会......
  • 前端二面经典vue面试题指南
    v-model的原理?我们在vue项目中主要使用v-model指令在表单input、textarea、select等元素上创建双向数据绑定,我们知道v-model本质上不过是语法糖,v-model在内部为......
  • 百度前端经典vue面试题整理
    子组件可以直接改变父组件的数据吗?子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时,子组件中所有的prop都将会刷......