Vue之动态绑定CSS样式
demo.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<!--自选版本-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div>
<h2>动态绑定CSS样式</h2>
<div>
<h4>示例一</h4>
<div v-on:click="varChangeColor = !varChangeColor" v-bind:class="{changeColor:varChangeColor}">
<span>点击切换颜色</span>
</div> <hr>
<h4>示例二</h4>
<button v-on:click="varChangeColor = !varChangeColor">改变颜色</button>
<button v-on:click="varChangeLength = !varChangeLength">改变长度</button>
<button v-on:click="varChangeLength = !varChangeLength,varChangeColor = !varChangeColor">两者都改变</button>
<!--computed属性封装对象-->
<div v-bind:class="computedClass">
<span>测试内容</span>
</div>
</div> </div> </div>
<script src="app.js"></script> </body>
</html>
app.js
var app = new Vue({
el: '#app',
data: {
varChangeColor: false,
varChangeLength: false,
},
methods: {},
computed: {
computedClass: function () {
return {
changeColor: this.varChangeColor,
changeLength: this.varChangeLength
}
},
}
})
style.css
span {
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.changeColor span {
background: green;
}
.changeLength span:after {
content: "length";
margin-left: 10px;
}
截图：
Vue之动态绑定CSS样式的更多相关文章
- Angular21 动态绑定CSS样式
1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...
- Vue 动态绑定CSS样式
今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4 使用进度条的话 就没有2.9. ...
- Vue.js 控制css样式
<script src="https://unpkg.com/vue/dist/vue.js"></script> <style type=" ...
- Vue 框架-05-动态绑定 css 样式
Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...
- vue 项目不显示样式 排版错乱
vue中的css 样式都在index.html中 看这里是否有导入css
- vue环境下安装npm,启动npm 修改js,css样式
vue环境下修改js,css样式 1.在所在的项目项目的resource 文件夹下面,shift + 鼠标右键--在此处打开命令行窗口: 2.在打开的窗口执行: 安装npm:npm install 启 ...
- vue动态绑定类样式ClassName知多少
对于动态绑定类样式,之前用的最多的也就是:class="{'classA':true}" ,今天遇到一种情况,就是要给元素动态添加一个保存在数据源中的类样式,那前边的这种写法显然满 ...
- VUE中CSS样式穿透
VUE中CSS样式穿透 1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将 ...
- Vue设置全局js/css样式
''' 配置全局js mian.js: import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; ...
随机推荐
- Docker下载mysql镜像
1.使用命令查看mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysql MySQL [OK] mariadb MariaDB [OK] mysql/ ...
- DataGuard切换(主库为Rac+备库为Rac)
http://blog.itpub.net/29477587/viewspace-1331121/ 前段时间做了一次主备库的切换,大体写下操作步骤和记录,分享下. 环境: db v ...
- Spring Security（十三）：5.2 HttpSecurity
Thus far our WebSecurityConfig only contains information about how to authenticate our users. How do ...
- AI LeNet
LeNet 参考链接: http://yann.lecun.com/exdb/publis/pdf/lecun-01a.pdf https://www.charleychai.com/blogs/20 ...
- 2018-2019-3《Java程序设计》第二周学习总结
学号20175329 2018-2019-3<Java程序设计>第二周学习总结 教材学习内容总结 第二三章与我们所学习的C语言有很多的相似点,在这里我想主要就以我所学习的效果来讨 ...
- Java NIO：IO与NIO的区别
一.概念 NIO即New IO,这个库是在JDK1.4中才引入的.NIO和IO有相同的作用和目的,但实现方式不同,NIO主要用到的是块,所以NIO的效率要比IO高很多.在Java API中提供了两套N ...
- Linux并发与同步专题 (4) Mutex互斥量
关键词:mutex.MCS.OSQ. <Linux并发与同步专题 (1)原子操作和内存屏障> <Linux并发与同步专题 (2)spinlock> <Linux并发与同步 ...
- face detection[Face R-FCN]
本文来自<Detecting Faces Using Region-based Fully Convolutional Networks>,又是腾讯ai实验室的作品.时间线为2017年9月 ...
- flink1.7 checkpoint源码分析
初始化state类 //org.apache.flink.streaming.runtime.tasks.StreamTask#initializeState initializeState(); p ...
- 使用 Emmet 生成 HTML 的语法详解
生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype.html.head.body 以及 meta 等内容.你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档 ...