vue属性绑定v-bind

属性绑定v-bind

双大括号不能在HTML attributes 中使用。想要响应式地绑定一个attribute,应该使用v-bind指令。

v-bind 指令指示Vue将元素id attribute 与组件的dyid属性保持一致。如果绑定值是null或者undefined,那么该attribute将会从渲染的元素上移除。

运行结果:

简写

因为v-bind:非常常用,可以将v-bind:简写为

动态绑定多个

bash 复制代码
<template>
<div v-bind="objectof">App</div>
</template>
<script>

export default{
    data(){
        return{
          objectof:{
            id:'appid',
            class:'appclass'
          }
        }
    }
}

</script>
<style scoped>
.appclass{
    color: red;
}
#appid{
    background-color: yellow;
}
</style>

运行结果:

相关推荐
pobu168几秒前
aksk前端签名实现
java·前端·javascript
烛阴6 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw011 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦24 分钟前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo26 分钟前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪00128 分钟前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明33 分钟前
我与技术无缘,只想副业搞钱
前端
liu_yueyang35 分钟前
JavaScript VMP (Virtual Machine Protection) 分析与调试
开发语言·javascript·ecmascript
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web