vue 的css及style的三种绑定方式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 的css及style的三种绑定方式相关的知识，希望对你有一定的参考价值。
参考技术A 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>
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>
python 中增加css样式的三种方式
增加css样式的三种方式：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--head中style是第一处写css样式的地方--> 7 <style> 8 .cl{ 9 /*背景色*/ 10 background-color: red; 11 } 12 </style> 13 <!--第三种引入css样式表--> 14 <link rel="stylesheet" href="s.css"> 15 </head> 16 <body> 17 <!--第二种通过属性的方式对标签增加css样式--> 18 <div class="cl" style="background-color: black">1</div> 19 </body> 20 </html>
以上是关于vue 的css及style的三种绑定方式的主要内容，如果未能解决你的问题，请参考以下文章