十六、内联style.html

本文主要是介绍十六、内联style.html，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

使用v-bind:style可以给元素绑定内联样式，不过在实际开发中尽量避免内联样式的出现，内联样式不便于维护。

1、对象语法

       1>v-bind:style 的对象语法十分直观，看着非常像CSS，但其实是一个JavaScript对象。

       2>CSS属性名可以用驼峰式（camelClass）或短横线分隔（kebab-case，记得用引号括起来）来命名。

            <div :style="{width:'100px',height:'100px',fontSize:'14px','background-color':'#FF0000'}">style样式</div>

       3>内联样式直接用对象字面量的方式设置，可读性较差，直接绑定到一个样式对象通常更好，这让模板更清晰。

            <div :style="styleObj">style样式</div>

2、数组语法

       <div :style="[styleObj,borderObj]">style样式</div>

<template v-if="false"><!--1(3)、直接绑定到一个样式对象（推荐这种写法）-->
            <div :style="styleObj">style样式</div>
        </template>
<script>
     let data={
         styleObj:{
             width:'100px',
             height:'100px',
             'font-size':'14px',
             backgroundColor:'#FF0000'
         },     
      };     
</script>

这篇关于十六、内联style.html的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！