• vue3 基础样式绑定语法


    本篇讲 vue 通过数据去进行 dom 样式的绑定操作, 主要分为 字符串, 数组, 对象等方式, 这个非常好理解, 凭着我们朴素的情感就能一步领悟到位的, 就还是演示一段吧.

    字符 & 数组 & 对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title> 样式相关 </title>
      <script src="https://unpkg.com/vue@3"></script>
      <style>
        .red {
          color: red;
        }
        .blue {
          color: blue;
        }
      </style>
    </head>
    <body>
      <div id="root"></div>
      <script>
        const app = Vue.createApp({
          data () {
            return { 
              classString: 'blue',
              classArray: ['red', 'green', { brown: false}],
              classObject: {
                red: true,
                green: true,
                brown: true
              }
            }
          },
          template: `
          <div :class="classString">字符串</div>
          <div :class="classArray">数组</div>
          <div :class="classObject">对象</div>
          <test class="blue" />
          `
        })
    
      // 注册一个子组件 test 并被父组件 app 在其 template 中进行调用
      app.component('test', {
        template: `
        <div :class="$attrs.class">one</div>
        <div>two</div>
        `
      })
    
      const vm = app.mount('#root')
      </script>
    </body>
    </html>
    

    最后来小结一波用 数据去控制样式主要有:

    • 通过 :class="string" 以字符串的方式进行样式绑定
    • 通过 :class="array" 以数组的方式进行样式绑定
    • 通过 :class="object" 以对象的方式进行样式绑定
    • 通过 :style="classObject" 以行内样式的方式进行样式绑定

    这些内容都是非常简单易懂的, 就不再做过的介绍啦, 自己练练就可以测试出来的.

  • 相关阅读:
    cxgrid动态创建列
    cxgrid显示海量数据
    Delphi 两个应用程序(进程)之间的通信
    Delphi实现窗体内嵌其他应用程序窗体
    Change tab position of PageControl to bottom
    how can I make the login form transparent?
    UniDBGrid增加显示记录数的label及隐藏refresh按钮
    java工厂模式实例化class
    Java 语言细节
    applet示例 WelcomeApplet.java <Core Java>
  • 原文地址:https://www.cnblogs.com/chenjieyouge/p/16631427.html
Copyright © 2020-2023  润新知