小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米介绍

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
您的位置:首页 > 前端开发 > Javascript > vue-js

Vue.js中的v-bind属性详解和案例

分类: vue-js2个赞

动态地绑定一个或多个 attribute(属性),或一个组件 prop 到表达式。

在绑定 class 或 style attribute 时,支持其它类型的值,如数组或对象。

在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />


<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 简写/缩写 -->
<img :src="imageSrc" />

<!-- 动态 attribute 名缩写 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。"prop" 必须在 my-component 声明 -->
<my-component :prop="someThing"></my-component>

<!-- 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>


v-bind具体实例:

 <div id="app">
        <!-- v-bind 绑定属性值的 v-bind:属性名字 -->
        <!-- <img v-bind:src="img_path" alt=""> -->
        <a v-bind:href="'http://127.0.0.1:900/getone?id='+ids"></a>

    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            img_path:'./4-small.jpg',
            ids:'1'
        }
    });

</script>

class绑定

<div id="app">
        <!-- <div v-bind:style="{color:c,fontSize:s+'px'}">hahah </div> -->
        <!-- v-bind 简写形式 -->
        <div :style="[c,f]">hahah </div>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            c:{
                color:'red'
            },
            f:{
                fontSize:'50px'
            }
        }
    });

</script>


小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> Vue.js中的v-bind属性详解和案例