Vue 动态属性绑定
2024年9月12日...大约 1 分钟
基本用法
使用指令 v-bind 来为 HTML 元素绑定属性，可以动态地改变属性值
简写形式为 :
单文件组件
<template>
<p v-bind:id="dynamicId">你好</p>
<button @click="dynamicId = 'id2'">改变id</button>
<!-- 简写 -->
<p :id="shorthandDynamicId">你好</p>
<button @click="shorthandDynamicId = 'shorthandDynamicId2'">改变id</button>
</template>
<script setup>
import { ref } from 'vue'
const dynamicId = ref('id1')
const shorthandDynamicId = ref('shorthandId1')
</script>HTML
<body>
<div id="app">
<p v-bind:id="dynamicId">你好</p>
<button @click="dynamicId = 'id2'">改变id</button>
<!-- 简写 -->
<p :id="shorthandDynamicId">你好</p>
<button @click="shorthandDynamicId = 'shorthandDynamicId2'">改变id</button>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const dynamicId = ref('id1')
const shorthandDynamicId = ref('shorthandId1')
return {
dynamicId,
shorthandDynamicId
}
}
}).mount('#app')
</script>
</body>同名简写
如果绑定的属性名与绑定的 JavaScript 值的名称相同，可以进一步简化
单文件组件
<template>
<p :id>你好</p>
<button @click="id = 'id2'">改变id</button>
</template>
<script setup>
import { ref } from 'vue'
const id = ref('id1')
</script>HTML
<body>
<div id="app">
<p :id>你好</p>
<button @click="id = 'id2'">改变id</button>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const id = ref('id1')
return {
id
}
}
}).mount('#app')
</script>
</body>动态绑定多个值
通过不带参数的 v-bind，可以将包含多个值的 JavaScript 对象绑定到单个元素上
单文件组件
<template>
<p v-bind="object">你好</p>
</template>
<script setup>
import { ref } from 'vue'
const object = ref({
id: 1,
name: '张三'
})
</script>HTML
<body>
<div id="app">
<p v-bind="object">你好</p>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const object = ref({
id: 1,
name: '张三'
})
return {
object
}
}
}).mount('#app')
</script>
</body> Powered by Waline v3.3.2