目录
v-bind
在 Vue 中,v-bind 主要承担着动态绑定元素属性这一关键作用。其中,“v-bind:href”能够简洁地写为“:href”。在 v-bind 中还能够书写合法的 JavaScript 表达式。通过 v-bind 能够成功地将数据与元素的各类属性紧密建立起关联,一旦数据出现变化,相应的属性值也会即刻进行实时更新。如此一来,便可以极为便捷地依据组件内部的数据状态来对元素的众多属性(诸如 class、style、src、href 等)实施动态控制,进而让视图具备更强的灵活性与动态性。
示例代码如下:
<body>
<div id="app">
<el-divider content-position="left">绑定变量到元素的属性</el-divider>
<el-space wrap>
<el-text v-bind:size="size" v-bind:type="type">Large-primary</el-text>
<!-- 简写 -->
<el-text :size="size" :type="type">Large-primary</el-text>
<!-- (3.4+),扩展为 :size="size" :type="type"-->
<el-text :size :type>Large-primary</el-text>
<!-- 动态属性名 -->
<el-text :[key]="tag" :size :type>Large-primary</el-text>
<!-- 绑定对象形式的属性 -->
<el-text v-bind="{size,type:'success'}">Large-primary</el-text>
</el-space>
<el-divider content-position="left">绑定表达式到元素的属性</el-divider>
<el-text :size="flag===true?'small&
标签:bind,修饰符,primary,Large,href,model,属性
From: https://blog.csdn.net/chinayun_6401/article/details/139912060