vue中style的用法

Posted 与鱼儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中style的用法相关的知识,希望对你有一定的参考价值。

最近学习了vue中class和class的用法,想来总结一下,也把我的知识提供给大家使用;首先来总结class的用法,vue中的class有4种写法;class和style都属于DOM属性,所以在vue中都用:class和:style表示

同样给id为box的div加上字体和颜色和背景颜色

方法一

<div id="box">

   <strong :style="{color:‘red‘,background:‘blue‘}">落入凡尘伤情着我</strong>  

</div>

<script>

  new  Vue({

    el:"#box",

  });

</script>

 

方法二

 

<div id="box">

 

   <strong :style="c">落入凡尘伤情着我</strong>  

 

</div>

 

<script>

 

  new  Vue({

 

    el:"#box",

    data:{

        c:{

          color:‘red‘,background:‘blue‘

        }

    }

 

  });

 

</script>

 

 

 

以上是关于vue中style的用法的主要内容,如果未能解决你的问题,请参考以下文章

vue---class和style的基本用法

Vue中Class和Style几种v-bind绑定的用法-详解案例

less基本用法

vue-loader 的深入用法

Vue2 + ElementUI 关于$emit用法总结

Vue中jsx的最简单用法