码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 设置style样式

时间:2019-08-22 10:50:12      阅读:1643      评论:0      收藏:0      [点我收藏+]

标签:red   nts   bin   直接   col   ack   ext   size   data   

1.直接添加行内样式

2.通过绑定设置style样式

3.将vue的属性设置为样式

4将多个vue属性设置为样式

<div id="box">
            <!--直接添加样式-->
            <p style="background-color: blue;">sssss</p>
            <!--绑定样式-->
            <p v-bind:style="‘background-color: red;‘">sssss</p>
            <!--将vue中的属性作为样式设置-->
            <p :style="obj">sssss</p>
            <!--将多个属性作为样式设置-->
            <p :style="[obj,obj1]">sssss</p>
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#box",
                data:{
                    obj:{
                        backgroundColor:"gold"
                    },
                    obj1:{
                        fontSize: "30px"
                    }
                },
            });
        </script>

 

Vue 设置style样式

标签:red   nts   bin   直接   col   ack   ext   size   data   

原文地址:https://www.cnblogs.com/dyd520/p/11392756.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!