双大括号不能在 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 } = VuecreateApp({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 } = VuecreateApp({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 } = VuecreateApp({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 } = VuecreateApp({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 } = VuecreateApp({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 表达式使用。
![[word] word定时自动保存功能的作用是什么 #知识分享#学习方法#媒体](https://img-blog.csdnimg.cn/img_convert/2834e946cc20418af917dbcd567bf8ab.jpeg)
