Vue的學習之路八:v-bind綁定style樣式

<body>
    <div id="app">
      <!-- 對象是無序鍵值對的集合 -->
      <h1 :style="styleObj1">這是一個h1</h1>

      <h1 :style="[styleObj1, styleObj2]">這是一個h1</h1>
    </div>

    <script>
      var vm = new Vue({
        el: '#app', 
        data: { 
          styleObj1: { color: 'red' , 'font-weight': 200 },
          styleObj2: { 'font-style': 'italic' },
        },
        methods: {
          
        }
      })
    </script>
  </body>

使用v-bind綁定style,添加樣式

  1. 使用對象:對象是無序鍵值對的集合
  2. 使用對象數組:數組內可以包含多個對象
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章