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>

运行结果:

相关推荐
西陵8 分钟前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常9 分钟前
vue中添加原生右键菜单
javascript·vue.js
小磊哥er18 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生23 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮29 分钟前
webpack基础
前端·webpack
YongGit1 小时前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学