动态添加类动态添加样式 ref获取dom

浓缩十八分

已于 2022-07-16 13:29:12 修改

阅读量499

点赞数

文章标签： css vue.js javascript

于 2022-05-08 16:29:17 首次发布

本文链接：https://blog.csdn.net/m0_68456754/article/details/124649888

版权

本文介绍了在Vue2和Vue3中如何动态添加类名以及通过`ref`属性获取DOM元素的方法，提供了在组件中操作DOM的实用技巧。

摘要由CSDN通过智能技术生成

<template>
  <div class="home">
                                  <!-- 类名  判断是否添加的条件 -->
    <!-- <div class="div" :class="{'color':flag}"></div> -->
    <!-- 三目运算 -->
    <!-- <div class="div" :class="flag?'color':''"></div> -->

                    <!-- 数组: data中的属性  -->
    <div :class="[ifwidth,ifcolor]"></div>

  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  data() {
    return {
      // 对象添加类名
      flag:true,
      // 数组添加类名
      // 属性：类名
      ifwidth:'div1',
      ifcolor:'color1'
    }
  }
}
</script>
<style lang="scss">
  .div {
    width: 100px;
    height: 100px;
    background: red;
  }
  // 对象
  .color {
    width: 200px;
    height