vue学习笔记--绑定样式

最新推荐文章于 2024-07-20 16:46:53 发布

原创最新推荐文章于 2024-07-20 16:46:53 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #javascript

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue中四种常见的样式绑定方法：字符串写法、数组写法、对象写法以及style样式对象和数组的使用。通过实例展示了如何根据需求灵活切换不同场景下绑定class和style。

1.绑定class样式--字符串写法

<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br>

2. 绑定class样式--数组写法

<div class="basic" :class="classarr">{{name}}</div><br>

3.绑定class样式--对象写法

<div class="basic" :class="classObj">{{name}}</div>

4.绑定style样式--对象写法

<div class="basic" :style="{fontSize: fsize + 'px'}">{{name}}</div><br>

5.绑定style样式--数组写法

<div class="basic" :style="styleObj">{{name}}</div>

<body>
  <div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br>

    <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
    <div class="basic" :class="classarr">{{name}}</div><br>

    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字也确定 ，但是要动态决定用不用-->
    <div class="basic" :class="classObj">{{name}}</div><br>

    <!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="{fontSize: fsize + 'px'}">{{name}}</div><br>

    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleObj">{{name}}</div>
  </div>
</body>
<script>
  Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

  const vm = new Vue({
    el: '#root',
    data: {
      name: '努力加油挣钱',
      mood: 'nomal',
      classarr: ['nomal', 'hoop', 'sad'],
      classObj: {
        hoop: false,
        sad: true,
      },
      fsize: 40,
      styleObj: {
        fontSize: '20px',
        color: 'red'
      }
    },
    methods: {
      changeMood() {
        // this.mood = 'hoop'
        const arr = ['nomal', 'hoop', 'sad']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    },

  })
</script>