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

<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: 200px;
    background-color: skyblue;
  }
// 数组
  .div1 {
    width: 100px;
    height: 100px;
  }
  .color1 {
    background-color: rgb(50, 39, 39);
  }
</style>

添加类名

<template>
  <div class="about">
    <h1 :style="{'color':'red','font-weight':200}">这是一个H1</h1>
 
    <h1 :style="styleObj1">这是一个H1</h1>
 
    <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
  </div>
</template>
<script>
export default {
  data(){
    return {
      styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
      styleObj2:{'font-style':'italic'},
    }
  } 
}
</script>
<style lang="">
  
</style>

 vue2中获取dom元素

 <div ref="my"></div>

  <!-- this.$ref.my   (ref中的起的名字)-->

vue3中获取dom元素

<template>
  <a href="https://www.baidu.com/" ref="A">123</a>
</template>

<script>
import { useRouter } from 'vue-router'
import { ref, reactive, toRefs, onMounted } from 'vue'
export default {
  name: 'App',
  components: {
  },
  setup() {
    let A = ref(null)
    onMounted(() => {
      console.dir(A.value);
    })
    return {
     // 获取dom 后一定要暴露出去 否则就会返回 ref(null)  中定义的类型
      A
    }
  }
}
</script>