vue学习笔记（一）---- vue指令（在vue中使用样式的方式）
认真学习，认真记录，每天都要有进步呀！！！
加油叭！！！
一、在vue中使用样式的方式:
1. 直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<body>
<div id="app">
<h1 :class="['red','thin','italic']">好饿好饿我好饿,不吃不吃我不吃</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {}
});
</script>
</body>
2. 使用三元表达式去决定是否添加样式
<h1 :class="[isred?'red':'','thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>
<!-- //data身上的东西在被控制的元素中可以直接就调用-->
var vm = new Vue({
el: '#app',
data: {
isred:false
},
methods: {}
});
用 input 的点击事件来改变样式:
<input type="button" value="变红" @click="isred=true"/>
<h1 :class="[isred?'red':'thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>
3.在数组中使用 对象来代替三元表达式，数组中嵌套对象，提高代码的可读性
<h1 :class="[{red:true},'thin','italic','active']">好饿好饿我好饿,不吃不吃我不吃</h1>
4.直接使用对象，传递对象作为类样式
在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以这里我没写引号, 属性的值 是一个标识符
<h1 :class="{red: true,thin: true,italic: true,active:false}">好饿好饿我好饿,不吃不吃我不吃</h1>
也可写成一个数组对象的方式
<h1 :class="classObj">好饿好饿我好饿,不吃不吃我不吃</h1>
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
来吧展示:
二、在vue中书写行内样式
<body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<!-- <h1 :style="styleObj1">这是一个h1</h1> -->
<h1 :style="[ styleObj1, styleObj2 ]">呜呜呜,感冒啦,阿秋</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObj1: { color: 'pink', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
},
methods: {}
});
</script>
</body>
</html>
来吧展示:
vue学习笔记（一）---- vue指令（在vue中使用样式的方式）的更多相关文章
- 【Vue学习笔记1】全局配置 Vue.config
1.slient 类型:boolean: 默认:false: 用法:Vue.config.silent = true 用于取消 Vue 所有的日志与警告
- vue学习笔记（一）——why Vue
- Vue学习笔记【8】——在Vue中使用样式
使用class样式 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 2.数组中使用三元表达式 <h1 : ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-vue-element-admin 前端学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
随机推荐
- 记录因Sharding Jdbc批量操作引发的一次fullGC
周五晚上告警群突然收到了一条告警消息,点开一看,应用 fullGC 了. 于是赶紧联系运维下载堆内存快照,进行分析. 内存分析 使用 MemoryAnalyzer 打开堆文件 mat 下载地址:htt ...
- java查询三级树（三级目录）
背景: 三级树实现效果 这里只介绍,查询数据库,构建三级目录的后端业务逻辑 1.创建查询类(对应数据库需要查出的字段) @Data @AllArgsConstructor @NoArgsConstru ...
- ironic组件硬件自检服务——ironic-inspector
介绍 ironic-inspector是一个用于硬件自检的辅助型服务,它可以对被ironic组件管理的裸金属节点进行硬件自检,通过在裸金属节点上运行内存系统,发现裸金属节点的硬件信息,例如CPU数量和 ...
- vim-瞬间移动打发
一,常用基本命令 set rnu 显示相对行号 1.ctrl+F 将屏幕向下滚动一屏 2.ctrl+u pageUp,ctrl+d pageDown 3.行内移动:W,b在单词间移动,ge向上跳,f ...
- Centos7.6分区、格式化、自动挂载磁盘
个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying 目录 1. 添加硬盘 2. 执行fdisk -l ...
- 春秋云境 CVE-2022-24663复现
靶标介绍: 远程代码执行漏洞,任何订阅者都可以利用该漏洞发送带有"短代码"参数设置为 PHP Everywhere 的请求,并在站点上执行任意 PHP 代码.P.S. 存在常见用户 ...
- 架构解析：Dubbo3 应用级服务发现如何应对双11百万集群实例
继业务全面上云后,今年双11,阿里微服务技术栈全面迁移到以 Dubbo3 为代表的云上开源标准中间件体系.在业务上,基于 Dubbo3 首次实现了关键业务不停推.不降级的全面用户体验提升,从技术上,大 ...
- 第三十节：fillder抓取APP数据之小程序
1.下载fillder ,fillder官网:https://www.telerik.com/fiddler 2.安装好后设置fillder: 工具->选项,打开设置面板.选择HTTPS选项卡. ...
- [.NET学习] EFCore学习之旅 -3 一些其他的迁移命令
1.Update-DataBase xxx 概述:将数据库回滚到某个版本. 1.首先创建一个表 Dog 2.生成迁移 Add-Migration CreateDogTable 并更新到数据库 Upd ...
- referer的反爬和爬虫下载视频
一.缘由 在梨视频等一些网站中会使用防盗链作为反爬的基础方法,这个反爬并不严重,只是平时的时候需要多加留意.此次实现对应链接中梨视频的下载. 二.代码实现 #1.拿到contid #2.拿到video ...