美文网首页
vue 的css及style的三种绑定方式

vue 的css及style的三种绑定方式

作者: 醉青风 | 来源:发表于2021-08-16 10:23 被阅读0次

css

1.数组方法,元素为css的名称,可以在里面使用三目运算
<div :class="[ isOne?'one':'' , 'two']">数组方法 </div>

2.对象方法,元素键名为css名称,用true和false 来控制是否显示
<div :class="{'one':isOne , 'two':true}">对象方法</div>

3.直接加入,加入的内容是css名称,可以通过计算来控制显示的css,名称
<div :class="isOne?'one':'two'" >直接加入</div>

js

1.数组方法,元素是一个个对象,对象则是style的键值对,当然可以用三目运算控制
<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>

2.对象方法,元素键名为style名称,值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值
<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>

3.直接加入,只要保证得出来的字符串是正确的即可,怎么用都可以
<div :style="(isOne ? 'color:green;' : '') + 'backgroundColor:#f00' ">直接加入</div>

相关文章

  • vue 的css及style的三种绑定方式

    css 1.数组方法,元素为css的名称,可以在里面使用三目运算 数组方法 2.对象方法,元素键名为css名称,用...

  • vue学习资料二(类和样式的绑定)

    VUE 类的绑定方式一:对象绑定方式 语法: className依然在style中设置,isShow映射在data...

  • vue中style scope深度访问新方式(::v-deep)

    vue中style scope深度访问新方式(::v-deep)如果vue的style使用的是css,那么则 但是...

  • 2021-08-11 Vue 利用css的var() 和attr

    vue绑定style直接给css的var变量传递一个值,然后结合css的var()函数使用这个值。 在data里面...

  • CSS

    一、 引入CSS的三种方式 在HTML标签内加style属性 运用style标签 用link标签引入 在CSS文件...

  • CSS基础(一)

    1.CSS 的引入方式有哪些? CSS 的引入方式有以下三种: 行内样式使用style属性引入CSS样式。 内部样...

  • css

    三种引入方式 行间样式:style。里面直接写的就是css 页面级css 中的 外部css文件 css选择器 i...

  • 任务6:CSS基础

    CSS全称是 Cascading Style Sheets, 层叠样式表 CSS有三种引入方式:①内联样式:在行内...

  • 4. CSS基础知识

    CSS的全称是什么? Cascading Style Sheets, 层叠样式表。 CSS的引入方式 有三种引入方...

  • 初学CSS

    问题1css全称:层叠样式表(Cascading Style Sheets) 问题21.CSS的三种引入方式 行内...

网友评论

      本文标题:vue 的css及style的三种绑定方式

      本文链接:https://www.haomeiwen.com/subject/lalmbltx.html