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

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

posted @ 2022-08-27 20:38  致于数据科学家的小陈  阅读(92)  评论(0)  编辑  收藏  举报