快捷導(dǎo)航

vue?動(dòng)態(tài)style?拼接寬度問題

更新時(shí)間：2022年09月23日 09:53:10 作者：趙四_

這篇文章主要介紹了vue?動(dòng)態(tài)style?拼接寬度問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue 動(dòng)態(tài)style 拼接寬度

大眾用法：

：style=" { width:30px } "

因?yàn)轫?xiàng)目涉及到進(jìn)度條用行內(nèi)樣式拼接寬度

其中item.progressNum 是后臺(tái)返回的數(shù)據(jù)，

vue style的用法

Vue中style的用法總結(jié)如下：

v-bind:style 簡(jiǎn)寫:style

1.基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
 
                },
                methods:{
                }
            });
        };
    </script> 
</head>
<body>
    <div id="box">
        <strong :style="{color:'red'}">文字...</strong>
    </div>
</body>
</html>

描述：

<strong :style="{color:'red'}">文字...</strong>

其中的red是class的

結(jié)果：

2.采用數(shù)組形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    c:{color:'red'}
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="[c]">文字...</strong>
    </div>
</body>
</html>

描述：

采用數(shù)組的形式，設(shè)置變量c,在data中以對(duì)象的形式設(shè)置style屬性

結(jié)果：

3.使用數(shù)組的形式，設(shè)置多個(gè)屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    c:{color:'red'},
                    b:{backgroundColor:'blue'}
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="[c,b]">文字...</strong>
    </div>
</body>
</html>

描述：

和第二種一樣，可以設(shè)置多個(gè)屬性

結(jié)果：

4.使用設(shè)置一個(gè)變量的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
    <script src="vue.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                    a:{
                        color:'red',
                        backgroundColor:'gray'
                    }
                },
                methods:{
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <strong :style="a">文字...</strong>
    </div>
</body>
</html>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: