P4 v-bind 绑定元素属性和样式

这个系列创作于2017年,所以 Vue.js 的版本可能会跟您读到的当时有差别,但并不影响总体讲解,请放心使用。

这期跟大家分享的,是指令。它可以往元素的属性中绑定数据,也可以动态地根据数据为元素绑定不同的样式。

绑定属性

最简单的例子,我们有一张图片,需要定义图片的。我们可以直接在元素的属性里面定义:

varapp =newVue({

el:'#app'

});

但是在实际工作中,我们通常会遇到的情况是,图片地址是从数据里返回的,这个时候指令就派上了用场。当然,我们可以同时绑定各种属性:

varapp =newVue({

el:'#app',

data: {

imgSrc:'https://cn.vuejs.org/images/logo.png',

imgAlt:'vue-logo',

imgTitle:'这是你指定的title,主人'

}

});

在浏览器可以看到效果:

这时候你也许会说,每次都要写一遍好麻烦。没问题,Vue 为你准备好了简写的方式:

绑定行内样式

也可以用于绑定样式,使用行内样式时,关键字是,跟在 html 里面直接写行内样式类似。注意样式的写法跟 css 会有些许不同,横杠分词变成驼峰式分词。

点击我吧,主人!

当然,把样式写在 Vue 的 data 里面会方便一些:

点击我吧,主人!

varapp =newVue({

el:'#app',

data: {

styles: {

color:'white',

backgroundColor:'blue'

}

}

});

在浏览器中可以看到 html 中的行内样式:

绑定CSS样式

更常见的做法肯定是根据数据绑定不同的样式了。这时关键字是。

.is-active{

color: white;

background-color: green;

}

点击我吧,主人!

varapp =newVue({

el:'#app',

data: {

isActive:true

}

});

效果如图:

当然,在实际工作中的值一般不会像例子中这样直接写死,而是根据用户的交互或者数据进行判断。

写在最后

源码地址:https://github.com/levblanc/vue-2-basics

视频攻略:自制本期视频攻略在此。

::: EOF :::

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181214G004MU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券