vue里的樣式添加之行間樣式

本文轉載自查看原文 2018-12-23 17:46 606

一：行間樣式：和綁定其他dom的屬性一樣， v-bind:style=

<div v-bind:style={backgroundColor: color}>2</div> //color是data或者computed的k；

<div v-bind:style= 'style1'>1<div> //整個style1是data的k或者computed的k

<div v-bind:style='[style1,{backgroundColor:"blue",width:"200px"},style2]'>aaa</div>； //style的值是數組，里面的值是data或computed的k

   div {
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div v-bind:style='style1'>1<div>
        <div v-bind:style='[style1,{backgroundColor:"blue",width:"200px"},style2]'>aaa</div>
        <div v-bind:style='demostyle'></div>
        <button v-on:click='changeColor'>click</button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
               
                color: 'red',
                style2: {
                    fontSize: '30px',
                    fontWeight: 'bolder'
                }
            },
            computed: {//利用computed來獲得，這厲害了，不但可以獲取到值（computed的k和data里的k用法一樣），
                        //而且節省了性能,一旦相關值變化，computed里的k會重新計算返回新的值
                style1: function () {
                    return {
                        height: '100px',
                        width: '100px',
                        backgroundColor: this.color //這一句如果在data里是獲取不到this.color的
                    }
                }
            },
            methods: {
                changeColor: function () {
                    this.color = this.color == 'red' ? 'yellow' : 'red';
                }
            }

        })
    </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue里給v-html元素添加樣式 vue class添加樣式獲取非行間樣式的函數 JavaScript 學習—— js獲取行間樣式和非行間樣式 js獲取非行間樣式/定義樣式 JavaScript獲取css 行間樣式，內連樣式和外鏈樣式的方式 vue項目給鼠標添加樣式 vue動態添加style樣式 vue 動態添加樣式的方式 javascript中獲取非行間樣式的方法