zoukankan      html  css  js  c++  java
  • vue中内联样式

    一、 使用内联样式


    1. 直接在元素上通过 `:style` 的形式,书写样式对象
    <h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
     

    2. 将样式对象,定义到 `data` 中,并直接引用到 `:style` 中
    (1) 在data上定义样式:
    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
    }
    (2)在元素中,通过属性绑定的形式,将样式对象应用到元素中:
    <h1 :style="h1StyleObj">这是一个善良的H1</h1>
     

    3. 在 `:style` 中通过数组,引用多个 `data` 上的样式对象
    (1)在data上定义样式:
     
    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
            h1StyleObj2: { fontStyle: 'italic' }
    }
    (2) 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
    <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
     
    二、实例
    <body>
      <div id="app">
        <!-- 对象就是无序键值对的集合 -->
        <h1 :style="styleObj1">这是一个h1</h1>
    
        <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            styleObj1: { color: 'red', 'font-weight': 200 },
            styleObj2: { 'font-style': 'italic' }
          },
          methods: {}
        });
      </script>
    </body>
     
  • 相关阅读:
    Fraction to Recurring Decimal
    Compare Version Numbers
    回溯法 -数据结构与算法
    Maximum Gap
    STL——迭代器的概念
    STL——内存基本处理工具
    STL——空间的配置和释放std::alloc(第一级配置器和第二级配置器)
    careercup-中等难度 17.12
    careercup-中等难度 17.11
    careercup-中等难度 17.9
  • 原文地址:https://www.cnblogs.com/wangyuxue/p/11791260.html
Copyright © 2011-2022 走看看