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
等时,必须用驼峰写法或者是引号引起来,否则在渲染时可能不识别就会出错!
“自动添加前缀”与“多重值”这两个体会不深,也没有很好的实例运用。希望后面有所体会时再加以阐述。
Vue.js(2.x)之Class 与 Style 绑定的更多相关文章
- Vue.js的类Class 与属性 Style如何绑定
Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- 【Vue.js】vue基础: 3种Class和Style绑定语法
凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- vue中,class、内联style绑定、computed属性
1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue.js 2.x笔记:表单绑定(3)
1. 基础用法 v-model 指令:在表单 input 和 textarea 元素上创建双向数据绑定. 1.1 单行文本(Text) <div id="app"> & ...
- Vue.js学习笔记--3.表单输入绑定
整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...
- Vue知识整理9:class与style绑定
1.v-bind:class:绑定class样式.通过控制isActive变量值来实现是否显示:通过.active样式设置背景颜色. 2.支持普通的class与v-bind绑定样式混合使用: v-bi ...
随机推荐
- 7、scala面向对象-继承
一.继承 1.extends Scala中,让子类继承父类,与Java一样,也是使用extends关键字 继承就代表,子类可以从父类继承父类的field和method:然后子类可以在自己内部放入父类所 ...
- Entity Framework Code-First(2):What is Code-First?
What is Code-First?: Entity Framework introduced Code-First approach from Entity Framework 4.1. Code ...
- Linux中Root用户密码变更、密码忘记
用户设置bash的时候,错把root的bash改为bin/bash,注意,不是“/bin/bash”!. 然后就登录不了root了,也修改不了/etc/passwd了. 解决: 1.重启Ubuntu, ...
- 【TMF eTOM】eTOM的概念和术语
eTOM的概念 为了有效地理解和使用eTOM业务流程框架,我们首先要理解构成eTOM的关键概念.这些概念使eTOM成为集成业务流程设计/评估与传统过程的一个非常有效的工具.在这些概念中使用了在本文中详 ...
- C# EventHandler委托事件小结--百度
最近遇到一个委托的问题,+=这个符号 this.Activated += new EventHandler(Form1_Activated);//Form1_Activated为方法名12 这个语句拆 ...
- 缓存处理类(MemoryCache结合文件缓存)
想提升站点的性能,于是增加了缓存,但是站点不会太大,于是不会到分布式memcached的缓存和redis这个nosql库,于是自己封装了.NET内置的缓存组件 原先使用System.Web.Cachi ...
- Unity 分场景打包
分场景打包步骤:导入unity中AB包后 1: 指定场景 2: 指定abname 3: 指定objinabname 4: 协同 5: 委托 void string unity 先引入命名空间 ...
- remap——ROS中修改订阅的节点名称
跑数据集或者使用不同传感器时,难免会遇到需要修改topic名称的时候,此时可以有两种做法. 一.直接修改源码.如果有launch文件,则修改launch文件对应的topic 二.直接进行remap操作 ...
- 2017-10-20 NOIP模拟赛
Lucky Transformation #include<iostream> #include<cstring> #include<cstdio> using n ...
- 如何从git上clone一个项目
今天想从自己的git上down下来代码,补充一些新的学习demo,不过因为平时工作中不适用git管理代码,所以,有些命令行忘记了.现在,通过这种方式再加深一遍印象吧. 那我就假设已经安装好了git了. ...