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的区别,以便以后查阅,也希望该文章日后能 ...
随机推荐
- Ant Design 日期选择组件RangePicker 选择时间范围后计算范围内的天数。
/** *需求:同年同月,同年不同月(两个月相减大于1,小于1),不同年(两个年相减大于1(是否为闰年),小于1),起止包含的月份及天 */ //首先引入组件 import { DatePicker} ...
- python-day79--知识回顾
内容回顾: 1. 可迭代对象.迭代器.生成器是什么?什么区别? 可迭代对象,含有__iter__,返回一个迭代器 迭代器,含有__iter__,__next__方法 生成器,yield,__next_ ...
- Vue 项目骨架屏注入与实践
作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...
- Elastic-Job 介绍
Elastic-Job是一个分布式调度解决方案,它解决了什么问题呢? 如果你需要定时对数据进行处理,但由于数据量实在太大了,一台机器处理不过来,于是用两台机器处理,第一台处理 id 为奇数的数据,第二 ...
- Let's Encrypt 免费通配符 SSL 证书申请教程——但是也需要email，域名所有权等，如果是黑产用的话会这样用吗？会不会暴露自己身份？？？
Let's Encrypt 免费通配符 SSL 证书申请教程 from:https://blog.csdn.net/English0523/article/details/79608464 2018 ...
- radio选择
input标签radio单选 <tr> <th style="font-weight: bolder;text-align: right;width:18%" & ...
- 1-2Controller之Session
laravel5.5版本. 视频教程是慕课网中的:轻松学会Laravel-表单篇 1-2 /*session简介: 1.由于HTTP协议是无状态(Stateless)的,所以session提供一种保存 ...
- jquery checkbox的使用
获取单个checkbox选中的写法: $('input:checkbox:checked').val(); $("input:[type='checkbox']:checked") ...
- Win10系列：JavaScript综合实例3
实现主页面的功能之后,接下来实现分类页面.分类页面中显示一种菜肴类别的详细信息,包括类别名称.图片.描述信息以及属于该类别的一些菜肴.在pages文件夹中添加一个名为classDetail的文件夹,并 ...
- Win10系列：JavaScript 数据绑定
使用数据绑定可以使页面中元素的属性值与数据源中的数据同步,其中数据源可以来自数据库.文件以及自定义的数据等.在常用的数据绑定方法中,简单对象绑定是将HTML元素与一个仅包含数据的简单对象相绑定,模板绑 ...