Vue_样式绑定

客官°小女子只卖身不卖艺 2022-05-22 13:23 304阅读 0赞

1.v-bind：class=‘{activitded:isActivitded} ’ class的对象绑定
如果是是一个对象，{red:’isRed’} key 是class的名字，value是是否有这个class 变量是一个布尔值
如果是一个数组的话，[calssA ,classB] 变量是一个字符串，是直接展现出来的，绑定了两个class类
如果是混合的，[classA，{classB：isB，classC：IsC}] classA肯定是有的，classB和classC的展示要看布尔值

2.v-bind：class=‘[activited]’ 这个是变量

3.内联样式style

v-bind:style=‘styleObject’

  1. <h1 v-bind:style='sytleObj' @click='changeColor'>你好</h1>

在data中定义：

  1. data(){
  2. return{
  3.  styleObj:{
  4.   color:'red',
  5. }
  6. }
  7. }
  9. //切换
  10. methods：{
  11. changColor:function(){ 
  12.  this.styleObj.color = this.styleObj.color ==='red'?'green':'red';
  13. }
  14. }

4.内联样式：

v-bind:style=‘[styleObject]’ 与上面的效果一样

v-bind:style=‘[styleObject，{font-size：‘18px’}]’

发表评论

表情：
评论列表 （有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue绑定样式

    3.1、绑定class 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定 <div class="basic" :class="mood"

    灰太狼灰太狼/ 0 赞/ 83 阅读

    相关 VUE 样式绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

    蔚落蔚落/ 0 赞/ 455 阅读