双大括号不能在 HTML 属性中使用。想要响应式地绑定一个属性，应该使用 v-bind 指令
1. 使用v-bind绑定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新建页面</title>
<script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
<div id="root">
<!--使用v-bind进行属性绑定-->
<div v-bind:id="name"></div>
<!--使用v-bind进行属性绑定(简写形式)-->
<div :id="name"></div>
<!--使用v-bind进行属性绑定(定义属性名称和html中属性名称相同的简写形式)-->
<div :name></div>
</div>
</body>
</html>
<script type="text/javascript">
const { createApp, reactive } = Vue
createApp({
data(){
return{
name:'id'
}
}
}).mount('#root')
</script>
2. 布尔型绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个简单的按钮是否可以点击案例</title>
<script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
<div id="root">
<!--使用v-bind进行属性绑定,true/false/''时属性生效情况-->
<!--true时属性生效-->
<button :disabled="isTrue">Button</button>
<!--''时属性生效-->
<button :disabled="isNull">Button</button>
<!--false时属性不生效-->
<button :disabled="isFalse">Button</button>
</div>
</body>
</html>
<script type="text/javascript">
const { createApp } = Vue
createApp({
data(){
return{
isTrue:true,
isNull:'',
isFalse:false
}
}
}).mount('#root')
</script>
3. 动态绑定多值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个简单的按钮是否可以点击案例</title>
<script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
<div id="root">
<!--使用v-bind进行动态多属性绑定,同时绑定id和name属性-->
<div v-bind="objectOfAttrs">Button</div>
</div>
</body>
</html>
<script type="text/javascript">
const { createApp } = Vue
createApp({
data() {
return {
objectOfAttrs: {
id: 'ids',
name: 'names'
}
}
}
}).mount('#root')
</script>
4. 使用Javascript绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个简单的按钮是否可以点击案例</title>
<script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
<div id="root">
<!--使用v-bind进行属性绑定,属性值部分使用javascrip值-->
<div :id="`list-${id}`">Button</div>
</div>
</body>
</html>
<script type="text/javascript">
const { createApp } = Vue
createApp({
data() {
return {
id: 'ids'
}
}
}).mount('#root')
</script>
5. 动态设置v-bind的属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个简单的按钮是否可以点击案例</title>
<script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
<div id="root">
<!--使用v-bind进行属性绑定,动态指定属性名称-->
<div :[attributename]="id">Button</div>
</div>
</body>
</html>
<script type="text/javascript">
const { createApp } = Vue
createApp({
data() {
return {
id: 'ids',
attributename:'name'
}
},
}).mount('#root')
</script>
- 调用函数绑定(暂未研究)
<time :title="toTitleDate(date)" :datetime="date">
{{ formatDate(date) }}
</time>
绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。
模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。
没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。
![[云原生] 二进制安装K8S一部分](https://img-blog.csdnimg.cn/direct/b8c13775a13e466ebcb9dac39503e983.png)
