• 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" 以行内样式的方式进行样式绑定

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

  • 相关阅读:
    padding magin 盒子模型
    background元素背景--font字体
    border 边框
    浅析mvvm模式和mvc模式的区别和联系
    Win10下小米路由器4A百兆版刷Openwrt固件【图片详细版】
    Vue源码-手写mustache源码
    微信小程序支付实现流程
    Fiddler对安卓模拟器中的app抓包
    Niginx中Vue Router 历史(history)模式的配置
    ES6中Promise方法详解
  • 原文地址:https://www.cnblogs.com/chenjieyouge/p/16631427.html
Copyright © 2020-2023  润新知