vue的属性绑定

vue的属性绑定

组件的迁移

代码实例

<!-- HelloWorld.vue>-->
<template>
  <div>{{ msg }}</div>
</template>
<script lang="ts">
  export default {
    data() {
      return {
        msg: 'hello world',
        rawHtml:"<a href='https://www.baidu.com'>百度</a>"
      }
    }
  }
</script>

<!-- App.vue   -->
<template>
  <HelloWorld />
</template>

<script setup lang="ts">
  import HelloWorld from './components/HelloWorld.vue';
</script>

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// 创建 Vue 应用并挂载到 #app 元素
createApp(App).mount('#app')

v-bind属性绑定attribute

dynamic动态属性绑定效果

代码

<!-- HelloWorld.vue>-->
<template>
  <div>{{ msg }}</div>
  <div v-bind:id="dynamicId" v-bind:class="dynamicClass">动态测试属性绑定</div>
</template>
<script lang="ts">
  export default {
    data() {
      return {
        msg: 'hello world',
        rawHtml:"<a href='https://www.baidu.com'>百度</a>",
        dynamicId: 'AppId',
        dynamicClass: 'AppClass',
        // 这里是一个动态绑定的属性
        // 你可以在组件中使用这个属性
        // 例如在模板中使用 v-bind:id="dynamicId"
        // 也可以在 JavaScript 中使用 this.dynamicId
        // 例如在组件的生命周期钩子中使用 this.dynamicId

      }
    }
  }
</script>

给动态属性加css渲染

注意id和class是不同的

效果

如果undefined

依旧没有

<div v-bind:id="dynamicId" v-bind:class="dynamicClass">动态测试属性绑定</div>
可以直接写
<div :id="dynamicId" :class="dynamicClass">动态测试属性绑定</div>

<!-- HelloWorld.vue>-->
<template>
  <div>{{ msg }}</div>
  <div v-bind:id="dynamicId" v-bind:class="dynamicClass" v-bind:title="dynamicTitile">动态测试属性绑定</div>
</template>
<script lang="ts">
  export default {
    data() {
      return {
        msg: 'hello world',
        rawHtml:"<a href='https://www.baidu.com'>百度</a>",
        dynamicId: 'AppId',
        dynamicClass: 'AppClass',
        dynamicTitile: undefined,
        // 这里是一个动态绑定的属性
        // 你可以在组件中使用这个属性
        // 例如在模板中使用 v-bind:id="dynamicId"
        // 也可以在 JavaScript 中使用 this.dynamicId
        // 例如在组件的生命周期钩子中使用 this.dynamicId

      }
    }
  }
</script>
<style>
.AppClass {
  color: red;

}
#AppId {
  font-size: 24px; /* 设置大号字体 */
  font-weight: bold; /* 可选：加粗字体 */
}
</style>