Vue.js开发连载四之vue.js指令v-bind

上一篇文章讲解“vue.js指令v-text”,本篇文章讲解“vue.js指令v-bind”。

v-bind可以把你在data中定义的数据和元素属性进行关联。

1. v-bind

【例】设置p标签的align属性居中。

浏览器访问:

2. v-bind简写

“v-bind”可简写为“:”,比如上面的例子:

3. 绑定表达式

v-bind可以绑定js表达式。

【例】当data中变量position值为1时,p标签居中,position值为其他时,p标签居左。

浏览器访问:

当将data下的变量position设为1时,p标签将会居中显示。

4. 绑定class

这里对于class和style的绑定比较特殊,所以单独拿出来讲解。

1)对象——v-bind:class="{}"

对象的键为class名,值为Boolean,为true对应的class才生效。

【例】为p标签添加三个class值,fontRed、font-bgcolor、font-big分别用样式设置p标签的颜色、背景色、字体大小,并用变量isShow设置class值是否生效。

注意

1. 对象中键带有连接符(-)时,需要用引号。

浏览器预览:

2)数组——v-bind:class="[ ]"

数组的值为class名

浏览器访问:

数组中将对象作为一个值

浏览器访问:

5. 绑定style —— v-bind:style="{}"

绑定style对象语法十分直观,看着非常像CSS,但其实是一个JavaScript对象。CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-case,记得用单引号括起来)来命名。

【例】设置p标签的颜色为红色,字体大小为20px。

浏览器访问:

注意

1. 当v-bind:style使用需要添加浏览器引擎前缀的CSS属性时,如transform,Vue.js会自动侦测并添加相应的前缀。

测验:

1. 如何用:style和:class分别做一个背景颜色为#ccc,高度/宽度为100px的div,并设置div的 contenteditable="true",实现一个可输入内容的div。

测验(有很多种做法,以下仅作为参考):

浏览器访问:

Vue.js连载为卓象程序员原创,转载请联系卓象程序员

关注卓象程序员,定期发布技术文章

下一篇讲解“vue.js指令v-if+v-else+v-else-if”

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180803A0EOQG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券