绑定内联样式 :style

最新推荐文章于 2024-03-01 16:18:27 发布

TWenYuan

最新推荐文章于 2024-03-01 16:18:27 发布

阅读量160

点赞数

分类专栏： javaScript 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/TWenYuan/article/details/125278042

版权

javaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

绑定内联样式 :style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
    <style>
        .box{
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
        <!-- 静态样式 -->
       <div style="background: red;color:green;">静态样式</div>
       <hr>
       <!-- 动态样式 -->
       <div :style="{background: 'red',color:'green'}">动态样式</div>
       <!-- 动态样式变形 -->
       <div class="box" :style="styleN">动态样式变形</div>

        <hr>
        <ul>
            <li v-for="(item,index) of arr" :style="{background:item.color}">
                <p>{{item.name}}</p>
                <p>{{item.url}}</p>
            </li>
        </ul>
    </div>
    <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            // 数据
            data:{
                styleN:{
                    backgroundColor:'orange',
                    color:'green',
                },
                arr:[
                    {
                        name:'京东',
                        url:'http://www.jd.com',
                        color:'green'
                    },
                    {
                        name:'天猫',
                        url:'http://www.tmall.com',
                        color:'yellow'
                    },
                ]
            },
            // 方法
            methods:{

            }
        })
    </script>
</body>
</html>