vue之style样式处理

最新推荐文章于 2023-03-26 10:26:57 发布

都挺好，刚刚好

最新推荐文章于 2023-03-26 10:26:57 发布

阅读量862

点赞数

分类专栏： vue2 文章标签：前端

本文链接：https://blog.csdn.net/seimeii/article/details/124447055

版权

vue2 专栏收录该内容

54 篇文章 4 订阅

订阅专栏

1.对象语法

<div v-bind:style=" {color: activecolor， fontsize: fontsize } "></div>

2.数组语法

<div v-bind: style=" [ basestyles,overridingstyles] "></div>

3.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>style样式处理</title>
</head>
<body>
    <div id="app">
       <div v-bind:style = '{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
       <div v-bind:style='objStyles'></div>
       <!--  数组语法 -->
       <div v-bind:style='[objStyles,overrideStyles]'></div>
       <!-- 点击切换按钮后，会执行 切换按钮绑定的 -->
       <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*
            样式绑定之内联样式Style:
        */ 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                borderStyle: '1px solid blue',
                widthStyle: '100px',
                heightStyle: '200px',
                // 对象语法
                objStyles: {
                    border: '1px solid green',
                    width: '200px',
                    height: '100px'
                },
                
                overrideStyles: {
                    border: '5px solid orange',
                    backgroundColor: 'blue'
                }
            },
            methods: {
               handle: function(){
                   this.heightStyle='100px';
                   this.objStyles.width = '100px'
               }
            }
        })
    </script>
</body>
</html>

注意数组style，后面的样式会覆盖前面的样式

都挺好，刚刚好

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue之style样式处理

1.对象语法<div v-bind:style=" {color: activecolor， fontsize: fontsize } "></div>2.数组语法<div v-bind: style=" [ basestyles,overridingstyles] "></div>3.示例<!DOCTYPE html><html lang="en"><head> <meta charse
复制链接

扫一扫