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>

运行结果:

相关推荐
二十雨辰4 分钟前
歌词滚动效果
前端·css
法医6 分钟前
和文心快码做朋友,让编程像“说话”一样简单
前端·文心快码
前端小巷子9 分钟前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
陈随易10 分钟前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js
知识分享小能手14 分钟前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
UrbanJazzerati26 分钟前
掌握 DOM 的基础属性与方法:从操作元素到构建动态效果
前端·面试
朗迹 - 张伟1 小时前
Gin-Vue-Admin学习笔记
vue.js·学习·gin
hashiqimiya1 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
古夕1 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js