Vue.js
Vue3学习第三天__Vue.js
发布于 3 年前 作者 banyungong 1180 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

theme: channing-cyan highlight: a11y-dark

样式绑定语法

直接赋值类名

样式部分:

.green {
   color: green;
 }
.yellow {
  color: yellow;
}

代码部分：

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天'
        }
      },
      template: `
      <div class="green">{{tip}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

我们可以直接像上面那样,直接将样式在代码中通过class赋值。

如果我们想实现颜色可以通过数据进行控制,我们可以怎么实现?

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天',
          colorType: 'green'
        }
      },
      template: `
      <div :class="colorType">{{tip}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

我们可以直接像上面这样,在data中定义一个变量去控制,然后在标签中通过:class="colorType"进行绑定

以上两种的显示结果是一样的如下:

class.png

如果我们想改变颜色我们可以在控制台中通过vm.$data.colorType = ‘yellow’,发现颜色变成我们修改的颜色了

class1.png

此外字符串修改外,Vue还提供了数组和对象等形式进行修改,下面分别给对象和数组做一些说明

通过对象修改

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天',
          colorType: 'green',
          colorObj: { green: true, yellow: true }
        }
      },
      template: `
      <div :class="colorObj">{{tip}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果:

obj.png

通过控制台的div标签我们发现样式中显示了green和yellow的类名,其中data中的colorObj: { green: true, yellow: true }中的第一个green代表的是类名,true代表的显示这个类名,如果想不显示类名将true修改为false

通过数组修改

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天',
          colorType: 'green',
          colorObj: { green: true, yellow: true },
          colorArray: [ 'green' ]
        }
      },
      template: `
      <div :class="colorArray">{{tip}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

当我们在colorArray中添加green在控制台中去看div的标签,就会显示对应的类名

array.png

数组中我们还可以添加对象

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天',
          colorType: 'green',
          colorObj: { green: true, yellow: true },
          colorArray: [ 'green', { blue: true } ]
        }
      },
      template: `
      <div :class="colorArray">{{tip}}</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果：

arrobj.png

数组中的对象参数和对象中的参数意思是一样的,{ blue: true }其中blue表示类名,true表示显示类名,如果是false就不会显示blue这个类名。

当父组件中嵌套子组件

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天',
          colorType: 'green',
          colorObj: { green: true, yellow: true },
          colorArray: [ 'green', { blue: true } ]
        }
      },
      template: `
      <div :class="colorType">{{tip}}
        <children />
      </div>
      `
    })

    app.component('children', {
      template: '<div>子组件</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

如果我们想要把子组件中的颜色修改为yellow,我们可以直接在子组件中添加一个类名,相关类名样式头部已经给出,我们这样写就行<div class="yellow">子组件</div>,如果子组件只有外部一个标签,就像例子中这样,我们还可以把类名写在子组件上<children class="yellow" />,当把子组件修改为2个标签,例如下面代码:

app.component('children', {
  template: `
      <div>子组件1</div>
      <div>子组件2</div>
  `
})

此时发现<children class="yellow" />中的class已经不生效了,因为系统不知道我们想把样式写在哪个子组件中,如果想解决这个问题,我们应该怎么做？

第一种方法

template: `
      <div :class="colorType">{{tip}}
        <children />
      </div>
      `
app.component('children', {
  template: `
      <div class="yellow">子组件1</div>
      <div class="yellow">子组件2</div>
  `
})

我们不在父组件中写样式,在template的子组件每个标签中添加样式,就能解决这个问题

第二种方法

template: `
      <div :class="colorType">{{tip}}
        <children class="yellow" />
      </div>
      `
app.component('children', {
  template: `
      <div :class="$attrs.class">子组件1</div>
      <div>子组件2</div>
  `
})

我们在父组件中写样式,在子组件中通过绑定:class = $attrs.class获取父组件中的样式,也可以解决这个问题

额外补充关于行内样式怎么写？

第一种方法

直接在行内样式中书写样式:

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天',
          colorType: 'green',
          colorObj: { green: true, yellow: true },
          colorArray: [ 'green', { blue: true } ]
        }
      },
      template: `
      <div style="color: yellow;">
        {{tip}}
      </div>
      `
    })

    app.component('children', {
      template: `
        <div :class="$attrs.class">子组件1</div>
        <div>子组件2</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

第二种方法

我们也可以在data中定义一个类名,然后再标签中绑定类名

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天',
          colorType: 'green',
          colorObj: { green: true, yellow: true },
          colorArray: [ 'green', { blue: true } ],
          styleTip: "color: yellow;"
        }
      },
      template: `
      <div :style="styleTip">
        {{tip}}
      </div>
      `
    })

    app.component('children', {
      template: `
        <div :class="$attrs.class">子组件1</div>
        <div>子组件2</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

第三种方法

我们可以通过对象的方式

<body>
  <div id="root">
  </div>
  <script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
      data () {
        return {
          tip: 'Vue学习第三天',
          colorType: 'green',
          colorObj: { green: true, yellow: true },
          colorArray: [ 'green', { blue: true } ],
          styleTip: "color: yellow;",
          styleTipObj: {
            color: 'pink'
          }
        }
      },
      template: `
      <div :style="styleTipObj">
        {{tip}}
      </div>
      `
    })

    app.component('children', {
      template: `
        <div :class="$attrs.class">子组件1</div>
        <div>子组件2</div>
      `
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台显示结果：

tipobj.png

需要我们想要添加别的样式,可以直接在styleTipObj中去写,类似如下：

styleTipObj: {
   color: 'pink',
   background: 'red'
}
```<p style="line-height: 20px; color: #ccc">
        版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
        作者: 周帅帅
        原文链接：<a href='https://juejin.im/post/6953819275912019998'>https://juejin.im/post/6953819275912019998</a>
      </p>
回到顶部