Vue 2 | Part 4 v-bind绑定元素属性和样式

vboy1010 发布于2019-08-20 13:51 / 2668人阅读

摘要：它可以往元素的属性中绑定数据，也可以动态地根据数据为元素绑定不同的样式。绑定属性最简单的例子，我们有一张图片，需要定义图片的。注意样式的写法跟会有些许不同，横杠分词变成驼峰式分词。这期就到这里，敬请期待下一期列表渲染和事件监听。

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

绑定属性

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

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

在浏览器可以看到效果：

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

绑定行内样式

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

当然，把样式写在vue的data里面会方便一些：

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

绑定CSS样式

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

效果如图：

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

这期就到这里，敬请期待下一期：列表渲染和事件监听。

写在最后

源码地址：https://github.com/levblanc/v...

视频攻略：小的不才，为求一赞，自制本期视频攻略在此。

GPU云服务器云服务器 vue绑定内联样式 Part-2 vue实例属性 vue.js 属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81277.html

Vue 2 | 基础API系列文章合集

摘要：在大家的鞭策和鼓励下，这个基础的系列终于完成了。关于更新的频率，因为是我自己一个人在做，文案视频都准备好了才发的话，最快也只能一周一更。最后这几期可以密集地更新，完全是因为公司放假了。不过月份的更新速度真的不能保证，抱歉。在大家的鞭策和鼓励下，这个基础API的系列终于完成了。所幸是没有真的更到一百期才完结（笑）。最初是因为觉得录视频好玩，才挖的这个坑。也想过中途放弃，关掉专栏，但由于...

instein 2019-08-20 14:00 评论0 收藏0
Vue 2 | Part 3 常用指令合集

摘要：修改的值可以看到元素中增加了，原来的文字也被隐藏了当然也可以赋值为其它东西，但是最后都会转换为布尔值来决定目标元素是否显示。本期跟大家分享的，是Vue里面除了v-bind和v-on之外的指令。因为都挺简单的，所以就一次性解决了。 v-text 直接把文字绑定到html。之前我们一直使用大胡子语法往html里面绑定数据，如果数据是纯字符串的话，也可以使用v-text。当...

walterrwu 2019-08-20 13:43 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cheriselalala 2019-08-29 16:34 评论0 收藏0
学习Vue.js-Day1

摘要：学习内容，基本语法和概念，打包工具，实战操作参考文献官网官方资料库全家桶全家桶文档概念前端框架借助可以实现手机开发前端框架是一套构造用户界面的框架，只关于视图层前端的主要工作室跟用户界面打交道，中的，实现界面效果框架是为了提高开发学习内容 1，Vue基本语法和概念 2，打包工具 Webpack , Gulp3，实战操作参考文献：官网： https://cn.vuejs.org...

Cristic 2019-08-02 11:23 评论0 收藏0