Vue 绑定style数组形式

2018年05月15日 15:14 | 3009次浏览

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上。

<!DOCTYPE html>
<html>
<head>
    <title>Vue绑定class--V型知识库www.vxzsk.com</title>
    <style>
        .demo{
            width: 100px;
            height: 100px;
            background-color: gray;
            display: inline-block;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="demo" :style="{backgroundColor: color}"></div>
        <div class="demo" :style="myStyle"></div>
        <div class="demo" :style="[myStyle,{height: width + 'px'}]"></div>
        <hr>
        <input type="text" v-model="color">
        <input type="text" v-model="width">
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                color: 'pink',
                width: 100,
            },
            computed: {
                myStyle(){
                    return {
                        backgroundColor: this.color,
                        width: this.width  + 'px'
                    }
                }
            }
        });
    </script>
</body>
</html>

v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。



小说《我是全球混乱的源头》

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:Vue 绑定style对象形式 下一篇:css 文字
^