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

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>

vue项目中经常会用到element ui，有时候需要修改默认的样式，比如表格，导航栏等，输入框等等。

可以用以下两种方式修改：

1.给组件加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改

2.外部引入css文件，默认样式会被覆盖

3.利用深度::v-deep深度修改组建的样式，可以直接写在到scoped作用域的style里面。（推荐）

也可以在外层加一个div，然后赋值一个class或者id，在scss中用这种语法修改对应的组件上的class名字即可

可以这一写，width是style的一个数据，js调用数据的方式就有 1、使用小数点的方式 2、使用中括号的方式 但是你的代码调用时 200要带单位 可以看到平时写法width的数字后面是有单位的 所有在使用函数的时候也需要带上哦 document.getElementById(

---