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 绑定的更多相关文章

  1. Vue.js的类Class 与属性 Style如何绑定

    Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...

  2. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  3. 【Vue.js】vue基础: 3种Class和Style绑定语法

    凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...

  4. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

  5. vue中,class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...

  6. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  7. Vue.js 2.x笔记:表单绑定(3)

    1. 基础用法 v-model 指令:在表单 input 和 textarea 元素上创建双向数据绑定. 1.1 单行文本(Text) <div id="app"> & ...

  8. Vue.js学习笔记--3.表单输入绑定

    整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...

  9. vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据

    vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...

  10. Vue知识整理9:class与style绑定

    1.v-bind:class:绑定class样式.通过控制isActive变量值来实现是否显示:通过.active样式设置背景颜色. 2.支持普通的class与v-bind绑定样式混合使用: v-bi ...

随机推荐

  1. Eclipse插件——EasyExplore安装

    Eclipse插件--EasyExplore安装 分类: eclipse2011-12-07 09:02 458人阅读 评论(0) 收藏 举报 插件功能 easyexplore是一个eclipse的小 ...

  2. 转:基于InfluxDB&Grafana的JMeter实时性能测试数据的监控和展示

    本文主要讲述如何利用JMeter监听器Backend Listener,配合使用InfluxDB+Grafana展示实时性能测试数据 关于JMeter实时测试数据 JMeter从2.11版本开始,命令 ...

  3. IDEA如何启动debug?

    选择remote,然后,修改host和port: host是我们访问backstop的ip,端口是监听端口8787,点击ok即可. 打断点,调试,即可.

  4. C#中小数转化为string的问题

    在C#中,把小数转化为string, 比如 45.12, 转换为string时,应该就是"45.12" 但是在项目开发中,开发法国的branch时,由于culture使用的是FR- ...

  5. 经典DP 嵌套矩形 (南洋理工ACM—16)

    本来是个很水的DP,结果被自己的代码习惯给打败了 代码: #include<iostream> #include<stdlib.h> #include<string.h& ...

  6. Flask 入门(第一篇)

    1. 认识 Flask Flask 是一个微型 Web 框架,依赖于 jinjia2 模板系统和 Werkzeug WSGI(本质为 Socket 服务端) 服务,默认情况不支持数据库抽象层.表单验证 ...

  7. Linux——DNS

    正向解析和逆向解析  正向域名解析,即DNS解析,是通过域名查询IP的解析方式.  逆向域名解析,即反向DNS解析,是通过IP地址查询域名. [root@localhost ~]# cp /var ...

  8. 洛谷P2060 faebdc玩扑克2

    P2060 faebdc玩扑克2 题目背景 faebdc和zky又在玩扑克 题目描述 给你2N张牌,编号为1,2,3..n,n+1,..2n.这也是最初的牌的顺序. 一次洗牌是把序列变为n+1,1,n ...

  9. 洛谷P3193 [HNOI2008]GT考试(KMP,矩阵)

    传送门 大佬讲的真吼->这里 首先考虑dp,设$f[i][j]$表示长串匹配到第$i$位,短串最多匹配到$j$位时的方案数 那么答案就是$\sum_{i=0}^{m-1}f[n][i]$ 然后考 ...

  10. SAP 权限层次

    此文可是没有维护过权限的人对权限有一个整体的认知,转来加以记忆. 一是系统权限 主要是对模块为单位的权限划分,具体就是用户对该模块可见不可见,能不能对该模块进行再授权的操作.表现在用户界面就是用户登录 ...