Vue.js04:vue样式-通过属性绑定方式为元素设置class类样式
- <!-- 传统写法 -->
- <!-- 第一种使用方式,直接传递一个数组 -->
- <!-- 在这里可以使用三元表达式 -->
- <!-- 简化写法 在数组中使用对象来代替三元表达式 -->
- <!-- 直接使用对象 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入 vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.red{
color:red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- 传统写法 -->
<h1 class="red thin">这是一个h1标签</h1> <!-- 第一种使用方式,直接传递一个数组 -->
<h1 :class="['red', 'italic']">这是第二个h1标签</h1> <!-- 在这里可以使用三元表达式 -->
<h1 :class="['red', 'italic', flag?'active':'']">这是第三个h1标签</h1> <!-- 简化写法 在数组中使用对象来代替三元表达式 -->
<h1 :class="['red','italic',{'active':flag}]">这是第四个h1标签</h1> <!-- 直接使用对象 -->
<h1 :class="{red:true, italic:false, thin:true, active:flag}">来来来,大战一场</h1>
</div>
<div id="article">
<p class="green thin">我的段落1</p>
<p :class="{red:true, active: pres}">我的段落2</p>
</div> </body>
<script>
// 实例化vue对象
let vm1 = new Vue({
// 绑定对象
el: '#app',
data: {
flag: true
},
methods: { }
})
let vm2 = new Vue({
el: '#article',
data: {
pres: false
}
})
</script>
</html>
Vue.js04:vue样式-通过属性绑定方式为元素设置class类样式的更多相关文章
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- Vue学习之路第十一篇:为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 动态修改 dom 元素的伪类样式
最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...
- Vue中img标签src属性绑定
最近刚刚完成了自己的毕业设计项目,整理一下过程中遇到的问题吧~~~ 我做的是一个基于Vue的信息资讯展示与管理平台,显示首页.详情页等的文章内容时就涉及到了图片展示,项目初始时我搭建的是静态网页结构, ...
- Vue 温故而知新 props如何双向属性绑定
传送门:https://cn.vuejs.org/v2/guide/components-custom-events.html https://segmentfault.com/q/101000001 ...
- Vue中img的src属性绑定
正确:<img :src=" 'files/'+value.src "> 或 <img :src="value.src">错误:< ...
- Vue学习之路第十二篇:为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- vue动态绑定类样式ClassName知多少
对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...
随机推荐
- 使用StackExchange.Redis 连接redis的pipeline命令使用
这几天公司老项目用到了这个组件,需要设置初始化ID,发现这个组件没有pipeline命令的方法,去官方文档去瞅了一波,发现也没有给出对应的解决方案,后面自己发现组件里面其实有 其实就是这个接口的一个方 ...
- 一个简单的cmake例子
一个简单的cmake例子CMakeLists.txt,生成动态库文件,可以指定发布目录. 尚不支持: 1.交叉编译环境配置 2.添加依赖库 #在当前目录新建一个build目录,然后cd build ...
- WPF 通过透明度遮罩和变换制作倒影效果
倒影效果 代码 <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http:/ ...
- 【机器学习】--FP-groupth算法从初始到应用
一.前述 二.构建FP_groupth数流程 1.扫描事务数据库D 一次.收集频繁项的集合F 和它们的支持度.对F 按支持度降序排序,结果为频繁项表L. 2.创建FP 树的根节点,以“null”标记它 ...
- python接口自动化(五)--接口测试用例和接口测试报告模板(详解)
简介 当今社会在测试领域,接口测试已经越来越多的被提及,被重视,而且现在好多招聘信息要对接口测试提出要求.区别于传统意义上的系统级别测试,很多测试人员在接触到接口测试的时候,也许对测试执行还可以比较顺 ...
- .NET Core微服务之基于IdentityServer建立授权与验证服务
Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.IdentityServer的预备知识 要学习IdentityServer,事先得了解一下基于Token的验证体系,这是一个庞大的主题 ...
- 知识小罐头06(tomcat8请求源码分析 中)
更正上一篇一个小错误,Connector中首先是将socket请求过来的信息封装成一个普通的Request对象(上一篇我写成HttpRequest对象,失误失误,根本就木有HttpRequest这样的 ...
- SpringBoot简单打包部署(附工程)
前言 本文主要介绍SpringBoot的一些打包事项和项目部署以及在其中遇到一些问题的解决方案. SpringBoot打包 在SpringBoot打包这块,我们就用之前的一个web项目来进行打包. 首 ...
- C++11 (多线程)并发编程总结
| 线程 std::thread 创建std::thread,一般会绑定一个底层的线程.若该thread还绑定好函数对象,则即刻将该函数运行于thread的底层线程. 线程相关的很多默认是move语义 ...
- 微信公众号开发C#系列-5、用户和用户组管理-支持同步
1.概述 眼前时下流行的经济有个叫粉丝经济,粉丝带动收益.一个好运营良好的公众号肯定会有一大批的粉丝团,如何挖掘粉丝来产生效益,是微信营销的关键.微信公众号后台本身提供了粉丝(用户)与用户分组的管理, ...