挑战小程序开发百日学习计划(第四天) V-bind:style

挑战百日学习计划,为自己做 (南宁小程序开发:www.zkelm.com )
做技术积累,人没有梦想不足于慰平生。 准备先攻克前端,后进军ai 和单片机 ,以下都是我一个一个代码敲的实例, 希望对大家有帮助,写得不是很好 ,大神请飘过

Vue之 Class操作 style
v-bind:style=“{对象}/数组”
实例:v-bind:style=“objectstyle”

<script>
 new Vue({
    el:"#app",
    data:{
        objectstyle:{
             color:"red",
             fontSize:'30px'
        }    
    }
})
 
</script>
<div id="app">
<p v-bind:style="objectstyle">这里的字体会变化</p>
</div>

显示结果:
在这里插入图片描述
其实 如果css的样式有-符号 需要使用波峰命名
在这里插入图片描述
font-size =fontSize or ’font-size‘ 用引号引起来

总结:对象的相同点
v-bind:class="{对象}"
v-bind:style=“{对象}”
对象=【建】:【值】

建=网页元素
值= vue变量

数组绑定 v-bind:style=[a,b]

<div v-bind:style="[baseStyles,overridingsStyle]"></div>
<script>
  new Vue({
    el:"app",
    data:{
    baseStyle:{
         color:geen,
         fontSize:'30px'
    },
    overridingStyle:{
           'font-weight':'hold'

   }
    }

})
</script>
原创文章 13 获赞 8 访问量 341

猜你喜欢

转载自blog.csdn.net/zkelm/article/details/105792606