vue

vue动态绑定属性(v-bind)

基本使用:

<img v-bind:src="imgUrl" alt="">
<a v-bind:href="aUrl">{{aName}}</a>
<!-- 简写 -->
<img :src="imgUrl" alt="">
<a :href="aUrl">{{aName}}</a>

data: {
imgUrl:"https://img14.360buyimg.com/babel/s190x240_jfs/t1/73611/34/16563/10157/5ddf5f8bE1609147d/4ec959f1cfa2de36.png!cc_190x240.webp",
aName: "百度一下",
aUrl: "http://www.baidu.com"
}

v-bind动态绑定class(对象语法):

.act{color:#f00;}
<!-- 不会覆盖  原来的class -->
<div class="title" :class="{'act': isActive}">{{message}}</div>

data: {
message: "你好啊",
isActive: true
},

v-bind动态绑定class(数组语法):

.aaa{}
.bbb{}

<!-- 数组语法不常用 不会覆盖原来的class -->
<h2 class="title" :class="[active, line]">{{message}}</h2>

data: {
message: "你好啊",
active: 'aaa',
line: 'bbb'
}

v-bind动态绑定style(对象语法):

<h2 :style="{fontSize: this.size + 'px', backgroundColor: this.bgc}">{{message}}</h2>

data: {
message: "你好啊",
size: 50,
bgc: '#f00'
},

v-bind动态绑定style(数组语法):

<h2 :style="[baseStyle]">{{message}}</h2>
data: {
message: "你好啊",
baseStyle: {backgroundColor: '#f00'}
},

223条评论

  • Craig Timber

    Oh my goodness! Impressive article dude! Thanks, However I am encountering issues with your RSS. I don’t understand why I cannot subscribe to it. Is there anybody else getting identical RSS issues? Anybody who knows the solution can you kindly respond? Thanx!!|

  • Miranda Pasqualetti

    Hello there! I could have sworn I’ve been to this web site before but after browsing through a few of the posts I realized it’s new to me. Anyways, I’m certainly happy I stumbled upon it and I’ll be bookmarking it and checking back often!|

  • Nedra Christophel

    I think that what you composed made a great deal of sense. However, consider this, suppose you typed a catchier title? I ain’t saying your content isn’t good, however suppose you added something that grabbed folk’s attention? I mean BLOG_TITLE is kinda plain. You might look at Yahoo’s home page and note how they write article headlines to grab people to open the links. You might add a video or a picture or two to grab people interested about what you’ve got to say. In my opinion, it would make your website a little bit more interesting.|

  • Aleshia Rajaphoumy

    Hello there! I could have sworn I’ve visited this blog before but after going through some of the posts I realized it’s new to me. Regardless, I’m certainly pleased I discovered it and I’ll be book-marking it and checking back often!|

Leave a Reply

邮箱地址不会被公开。