vuejs中v-bind绑定class时的注意事项
关于v-bind绑定class的实例
作用：可用于不同样式之间的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
<style>
.static {
font-size: 120px;
width: 600px;
margin: 0 auto;
background-color: yellow;
height: 120px;
line-height: 120px;
text-align: center;
} .class-a {
color: #FF0000;
} .class-b {
text-decoration: underline;
}
</style>
</head> <body>
<div id="app">
<div v-bind:class="classObject">
关于class的绑定
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classObject: {
//'class-a',不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成'class-a',用引号括起来。
//否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。
'class-a':true,
'class-b': false
}
}
});
</script>
</body> </html>
vuejs中v-bind绑定class时的注意事项的更多相关文章
- jQuery中的bind绑定事件与文本框改变事件的临时解决方法
暂时没有想到什么好的解决办法,我现在加了个浏览器判断非ie的话就注册blur事件,这样有个问题就是blur实在别的控件活动焦点的时候,txtStation控件注册的方法是为了填充它紧挨着的一个下拉列表 ...
- mybatis动态sql中的bind绑定
知识点:bind在模糊查询中的用法 在我的博客 mybatis中使用mysql的模糊查询字符串拼接(like) 中也涉及到bind的使用 <!-- List<Employee> ...
- Service官方教程(9)绑定服务时的注意事项
Binding to a Service Application components (clients) can bind to a service by calling bindService() ...
- WPF 使用XML作为绑定源时Xaml注意事项
直接在xaml定义时xml时应该注意的! xml数据 <?xml version="1.0" encoding="utf-8"?> <Stri ...
- C++中getline()和cin()同时使用时的注意事项
今天做tju的oj,遇到一个问题,想前部分用cin函数一个一个的读入数据,中间部分利用getline()一起读入一行,但是测试发现,cin之后的getline函数并无作用,遂谷歌之.原来cin只是在缓 ...
- Python中正则匹配使用findall时的注意事项
在使用正则搜索内容时遇到一个小坑,百度搜了一下,遇到这个坑的还不少,特此记录一下. 比如说有一个字符串 "123@qq.comaaa@163.combbb@126.comasdf111@a ...
- mybatis中使用where in查询时的注意事项
我使用的时候collection值为mapper的参数名如:int deleteRoleByUserIds(@Param("userIds") String[] userIds); ...
- 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
[源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
随机推荐
- input type="number" 时 maxlength不起作用
给input标签添加 oninput=“if(value.length>11) value=value.slice(0,11)”
- file 文件上传后缀转化小写
1.上传的文件后缀是大写的我们做上传文件的时候考虑的比较少,所以我就想把客户上传的文件后缀统一一下,后面我解析附件的时候比较好解析.例子:我得到的文件名称:$infoFileName;$fileNam ...
- PAT 1008 Elevator
1008 Elevator (20 分) The highest building in our city has only one elevator. A request list is mad ...
- 一步步构建iOS路由
什么是移动端路由层: 路由层的概念在服务端是指url请求的分层解析,将一个请求分发到对应的应用处理程序.移动端的路由层指的是将诸如App内页面访问.H5与App访问的访问请求和App间的访问请求,进行 ...
- Java反序列化修复方案
1)下载与当前大版本相同的commons-collections包(原来是3.2.x就替换为3.2.2,原来是4.x就替换为4.4.1) 下载链接:http://commons.apache.org/ ...
- 使用web3+solc编译发布以太坊智能合约
一.环境安装: 1.安装web3工程:npm install web3 2.安装solc工程:npm install solc二.在node环境中使用 先引用所需环境: var fs = requir ...
- oracle的case when的用法和decode函数的用法
oracle中,我们要使用case when时,要怎样使用 如下测试数据,我要把ClassId 的1变成一班,2变成二班,3变成三班,那sql要怎样写呢? 1.case when的用法 -- orac ...
- sql根据年月日查询注册数或者和值
//公司需要我做一个根据每天用户注册数量生成一个折现图,sql如下,//亲测好用,只是如果某一天没有注册的话,就不会显示日期 SELECT DATE_FORMAT(f.registDate, '%Y- ...
- XIA.人机猜拳
package test1_game; /** * 电脑玩家类 * * @author ljj * */ import java.util.Scanner; public class Computer ...
- NLTK 3.2.2 安装经验
NLTK 3.2.2 安装经验 Nltk 3.2.2要求Python版本是Python2.7 或者Python3.4+. Nltk 3.2.3 如果是从网站上直接下载程序进行安装可能会报错:Pytho ...