Vue绑定内联样式

最新推荐文章于 2024-03-12 20:29:27 发布

代码编编◐

最新推荐文章于 2024-03-12 20:29:27 发布

阅读量305

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/wqy18378671261/article/details/117373713

版权

1、对象语法
v-bind:style的对象语法十分直观——非常像CSS，但其实是一个JavaScript对象。
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue绑定“内联样式”</title>
    <style>
        #app {
            width: 500px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <!-- 1、对象语法 -->
    <div id="app">
        <h2>绑定style的对象语法</h2>
        <img src="./Q图_Joken03.jpg" alt="动漫" v-bind:style="styleObject">
    </div>

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var v = new Vue({
            el: "#app",
            data: {
                styleObject: {
                    width: "450px",
                    height: "450px",
                    // CSS属性可以用【短横线分隔】或【驼峰式】，需要用“ 引号 ”括起来命名
                    // 【短横线分隔】命名
                    "box-shadow": "0 5px 15px 5px #888888",
                    // 【驼峰式】命名
                    borderRadius: "50px"
                }
            }
        });
    </script>
</body>

</html>

执行效果图：
在这里插入图片描述

2、数组语法
v-bind:style的数组语法可以将多个样式对象应用到同一个元素。
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue绑定“内联样式”</title>
    <style>
        #app {
            width: 500px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <!-- 2、数组语法 -->
    <div id="app">
        <h2>绑定style的数组语法</h2>
        <img src="./Q图_Joken03.jpg" alt="动漫" v-bind:style="[styleOne, styleTwo]">
    </div>
    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var v = new Vue({
            el: "#app",
            data: {
                styleOne:{
                    width: "450px",
                    height: "300px"
                },
                styleTwo:{
                    "box-shadow": "0 5px 15px 5px #888888",
                    borderRadius: "50px",
                    border:"15px solid #fff"
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

代码编编◐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue绑定内联样式

1、对象语法v-bind:style的对象语法十分直观——非常像CSS，但其实是一个JavaScript对象。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>V.
复制链接

扫一扫