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变 ...
随机推荐
- hutool包的DateUtil工具类
[首先引入依赖 ] <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-core& ...
- 【题解】CF1715A Crossmarket
题面传送门 解决思路 首先,我们让 Megan 先走,因为他可以留下传送门.可以得知,不管怎么走,他到达终点所耗费的能量一定是 \(n+m-2\) . 然后,Stanley 走时就可以利用传送门.考虑 ...
- 2022春每日一题：Day 17
今天打CF去了,但是很菜,只做了三题.赛后一分钟做出了第四题,wa了,改了一下下,过了 第一题就是对应的小写字母在大写字母前出现. 第二题直接dfs. 第三题dp,f[i][j]表示以第i个数开始加了 ...
- 随笔——mvc公众号自动登录跳转到原页面的方法
页面路径传参跳到那带到哪 1.全局过滤(继承过滤也行).这里使用的全局过滤 2.过滤判断需要登录的话,获取本次路径传到登录的页面 3.登录的页面判断是微信浏览器的话,参数带到微信登录接口 4.微信登录 ...
- Android 按钮自定义背景后点击没有动画效果
只需要在按钮中添加属性就可以了 android:foreground="?selectableItemBackground"
- Execute Crond Service on openEuler
一.Execute Crond Service on openEuler 1 crond 概述 crond就是计划任务/定时任务 常见有闹钟.PC端定时关机 shutdown -s -t 200,定时 ...
- Scanner例题讲解
Scanner例题讲解 题:输入多个平均数,求其总和与平均数;每输入一个数用回车确认,通过输入非数字来结束输入并输出执行结果 public class Demo05 { //输入多个平均数, ...
- JavaScript入门⑨-异步编程●异世界之旅
JavaScript入门系列目录 JavaScript入门①-基础知识筑基 JavaScript入门②-函数(1)基础{浅出} JavaScript入门③-函数(2)原理{深入}执行上下文 JavaS ...
- BIO和NIO的区别和原理
BIO BIO(Blocking IO) 又称同步阻塞IO,一个客户端由一个线程来进行处理 当客户端建立连接后,服务端会开辟线程用来与客户端进行连接.以下两种情况会造成IO阻塞: 服务端会一直阻塞,直 ...
- 痞子衡嵌入式：我被邀请做贸泽电子&与非网联合推出的《对话工程师》节目嘉宾
<对话工程师>是「贸泽电子」赞助.「与非网」制作的一档网络节目,自2022年11月起,邀请不同技术领域的资深工程师,聊聊开发过程中的经验感悟,栏目共 10 期,痞子衡有幸被邀请做了第 4 ...