vue3之基础语法 动态class :class :style

vue3之基础语法

基础的样式写法

:style

:style="{'color': colorStatus['success']}"

动态样式之 对象写法

• 方法1

  • 用ts定义当前对象的type数据类型 type style
  • 定义当前的样式的数据 const style
  • 定义当前显示的 数据 msg

  <template>
    <div>
      <div :style="style">{{ msg }}</div>
    </div>
  </template>
  
  <script setup lang="ts">
  type style = {
    color: String
    height: String
  }
  const style = {
    color: 'red',
    height: '100px',
  }
  const msg: String = '小渣亮'
  </script>
  

  • 效果
    

• 方法2：
  - 动态样式之对象
  - type cls 限制对象的类型
  - const cls 写入对应的要展示的

  <template>
    <div>
      <div :class="cls">我是菜鸡2</div>
    </div>
  </template>
  
  <script setup lang="ts">
  type cls = {
    aaa: Boolean
    bbb: Boolean
  }
  const cls = {
    aaa: true,
    bbb: true,
  }
  </script>
  <style scoped>
  .aaa {
    color: blue;
  }
  .bbb {
    color: orange;
    font-weight: 700;
  }
  </style>
  

  • 效果：

  

动态样式之 数组写法

• 动态样式数组写法
• 使用一个flag去判断显示那个class类名

<template>
  <div>
    <div :class="[flag ? 'aaa' : 'bbb']">我是菜鸡</div>
  </div>
</template>

<script setup lang="ts">
const flag: Boolean = true
</script>
<style scoped>
.aaa {
  color: blue;
}
.bbb {
  color: orange;
}
</style>

• 效果

v-for循环

• 使用ts的 type对数组的不同类型的限制
• 对应复杂数据类型时候 使用 type arr:Array = [ ]
• 对于简单数据类型时 使用 type arr2:Array = [] 等

<template>
  <div>
    <div class="test">
      <span v-for="item in arr" :key="item">{{ item.age }}</span> <br />
      <span v-for="item in arr2" :key="item">{{ item }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const arr: Array<any> = [{ age: 20 }, { age: 30 }]
const arr2: Array<Number> = [1, 2, 3]

type ArrT = {
  age: number;
  name: string;
  sex?: string;
  flag: boolean;
};
const arr: Array<ArrT> = reactive([
  {
    age: 20,
    name: "222",
    // sex: "男",
    flag: false,
  },
]);
console.log("arr", arr);
</script>
<style scoped>
.test > span {
  margin-right: 10px;
}
</style>

• 效果：
  

v-model

• v-model这是数据的双向绑定，因此需要设置的是响应式数据
  • 简单的数据类型为 ref包裹即可
  • 复杂的数据类型为 reactive包裹即可
• 简单的数据类型

  <template>
    <div>
      <div>
        <input v-model="test" type="text" />
        {{ test }}
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  const test = ref('test')
  </script>
  <style scoped>
  .test > span {
    margin-right: 10px;
  }
  </style>
  
  

  • 效果
    
• 复杂的数据类型

<template>
  <div>
    <div>
      <input v-model="obj.age" type="text" />
      {{ obj.age }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const obj = reactive({
  age: 20,
})
</script>

• 效果