HTML5教程

十六、内联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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!