Vue.js（2.x）之Class 与 Style 绑定

1、前面看数据绑定时还很困惑v-bind处理class时可以使用json格式的值，为什么换成id、href等其他属性就不行。看了下文档解释后明白了些：

2.对象语法主要有以下三种形式：

1）直接在v-bind指令后使用键值对形式：键是否显示为class取决于值是否为真，须留意键是否要加引号（如果键有特殊符号）。

2）直接绑定数据里的一个对象，并设定其为v-bind指令后的值。

3）绑定对象的计算属性并设定其为v-bind指令后面的值。

3.数组语法：下图中只有少数几个class，当然一般元素的class也尽量3个以内，不排除偶尔有多个的情况，这时可以对象与数组结合，即数组里的某个值可以为对象。

组件还不熟，暂且不表。

4.“其实它是一个JavaScript对象”到底是啥，偶这种半吊子好奇心被吊了起来，查半天没找到个所以然。

如果style属性中带有中划线-，例如：font-size、background-color、background-img等时，必须用驼峰写法或者是引号引起来，否则在渲染时可能不识别就会出错！

“自动添加前缀”与“多重值”这两个体会不深，也没有很好的实例运用。希望后面有所体会时再加以阐述。

转载于:https://www.cnblogs.com/anns/p/7395941.html

Vue.js（2.x）之Class 与 Style 绑定相关推荐

Vue.js中的v-model指令（双向绑定）
Vue.js中v-model的作用 v-model的作用和使用场景 1.v-model的作用--双向绑定 2.v-model双向绑定的使用场景--表单 3.总结 v-model的作用和使用场景你好! ...
Vue.js 2.x笔记：表单绑定（3）
1. 基础用法 v-model 指令:在表单 input 和 textarea 元素上创建双向数据绑定. 1.1 单行文本(Text) <div id="app">&l ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
vue.js+boostrap最佳实践
一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
全面掌握前端框架Vue.js
整理自菜鸟教程 Vue.js简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽 ...
[Vue.js] 一篇超级长的笔记，给《Vue.js 实战》划个重点
本文前言本笔记建立在书籍<Vue.js实战 / 梁灏编著>的基础上,旨在帮助有 Vue.js 基础的朋友快速回忆 Vue.js 的细碎内容.初学者建议阅读<Vue.js实战> ...
vue.js 2.x教程
教程基础安装兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器. 更新日志 ...
用vscode实现vue.js项目的一个完整过程
1.新建项目打开Visual studio code 打开一个你想要创建项目的文件夹打开集成终端:查看 –> 集成终端或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...
使用ASP.NE+VUE开发一款简单记账WebAPP之七（vue.js构建记账统计页面）
转载地址https://blog.csdn.net/yiershan1314/article/details/77970713 一.添加两个新页面 /components/ MonthCount.vu ...

Vue.js（2.x）之Class 与 Style 绑定

Vue.js（2.x）之Class 与 Style 绑定相关推荐

最新文章

热门文章