2021-7-7 VUE动态样式
Vue的动态样式实例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="{active:vis}"></div>
</div> <script>
Vue.config.keyCodes.a=65;
new Vue({
el: '#app',
data: {
vis:false
},
methods:{
handle:function(event){
this.vis=this.vis?false:true;
// this.vis=!this.vis;
}
}
})
</script>
</body>
</html>
对象实例
Vue的动态样式实例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
.new{
background-color: green;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="[activeClass,newClass]"></div>
</div> <script>
Vue.config.keyCodes.a=65;
new Vue({
el: '#app',
data: {
activeClass:'active',
newClass:'new'
},
methods:{
handle:function(event){
this.newClass=''; }
}
})
</script>
</body>
</html>
数组实例
Vue的动态样式实例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
.new{
background-color: green;
}
.money{
color: yellow;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="[activeClass,newClass,{money:isMoney}]">rnm,退钱</div>
</div> <script>
Vue.config.keyCodes.a=65;
new Vue({
el: '#app',
data: {
activeClass:'active',
newClass:'new',
isMoney:false
},
methods:{
handle:function(event){
this.isMoney=!this.isMoney;
}
}
})
</script>
</body>
</html>
数组加对象组合实例
Vue的动态样式实例4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
.new{
background-color: green;
}
.money{
color: yellow;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="arrClasses">rnm,退钱</div>
<div :class="objClasses">rnm,退钱</div>
</div> <script>
new Vue({
el: '#app',
data: {
arrClasses:['active','new'],
objClasses:{
money:true
}
},
methods:{
handle:function(event){
this.arrClasses=[];
this.objClasses.money=!this.objClasses.money;
}
}
})
</script>
</body>
</html>
数组实例
Vue的动态样式实例5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active{
border: 2px solid darkred;
width: 100px;
height: 100px;
}
.new{
background-color: green;
}
.money{
color: yellow;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="aaa" @click="handle" name="">
<div :class="arrClasses">rnm,退钱</div>
<div :class="objClasses">rnm,退钱</div>
</div> <script>
new Vue({
el: '#app',
data: {
arrClasses:['active','new'],
objClasses:{
money:true
}
},
methods:{
handle:function(event){
this.arrClasses=[];
this.arrClasses.push('active');
this.arrClasses.push(this.objClasses); }
}
})
</script>
</body>
</html>
样式push数组
如果class和v-bind:class混用，那么两种样式会结合在一起
Vue的Style直接指定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="{border:borderStyle,width:widthStyle,height:heightStyle}">rnm,退钱</div>
<input type="button" value="改变" name="" @click="handle">
</div> <script>
new Vue({
el: '#app',
data: {
borderStyle:'1px solid red',
widthStyle:'200px',
heightStyle:'300px'
},
methods:{
handle:function(event){
this.borderStyle='1px solid blue';
}
}
})
</script>
</body>
</html>
Style样式
Vue的对象Style直接指定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="rnmStyle">rnm,退钱</div>
<input type="button" value="改变" name="" @click="handle">
</div> <script>
new Vue({
el: '#app',
data: {
rnmStyle:{
border:'1px solid red',
width:'200px',
height:'300px',
}
},
methods:{
handle:function(event){
this.rnmStyle.height='100px';
}
}
})
</script>
</body>
</html>
对象Style
Vue的数组混合对象Style的直接指定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="[rnmStyle,tuiqianStyle]">rnm,退钱</div>
<input type="button" value="改变" name="" @click="handle">
</div> <script>
new Vue({
el: '#app',
data: {
rnmStyle:{
border:'1px solid red',
width:'200px',
height:'300px',
},
tuiqianStyle:{
width:'100px',
height:'100px'
}
},
methods:{
handle:function(event){
this.rnmStyle.height='100px';
}
}
})
</script>
</body>
</html>
数组对象Style
数组样式后面一个会覆盖前面的样式
2021-7-7 VUE动态样式的更多相关文章
- vue 动态样式
<p :style="{width:'4px',height: '24px',background: '#f7ce51'}"></p> <p:styl ...
- vue动态样式设置
思路: 通过 v-bind:class="true ? style1 : style2 " 配合三元表达式完成样式的切换 具体实现 //return设置控制的参数 //有多个需要样 ...
- vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped
- vue基础-动态样式&表单绑定&vue响应式原理
动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- 深入理解脚本化CSS系列第五篇——动态样式
前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...
- DOM动态脚本和动态样式
动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...
- Less （一种动态样式语言）
Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由R ...
随机推荐
- 还不知道怎么 Mock ，用这 6款工具！
以下是几个常用的国外可以mock测试的工具,供参考: MockServer: MockServer 是一个开源的 API mock 测试工具,提供了强大的模拟服务器和 mock 服务功能.MockSe ...
- Python获取jsonp数据
使用python爬取数据时,有时候会遇到jsonp的数据格式,由于不是json的,所以不能直接使用json.loads()方法来解析,需要先将其转换为json格式,再进行解析.在前面讲了jsonp的原 ...
- 分布式搜索引擎Elasticsearch基础入门学习
一.Elasticsearch介绍 Elasticsearch介绍 Elasticsearh 是 elastic.co 公司开发的分布式搜索引擎. Elasticsearch(简称ES)是一个开源的分 ...
- js验证统一社会信用代码
js验证统一社会信用代码 //验证信用代码 function CheckSocialCreditCode(Code) { var patrn = /^[0-9A-Z]+$/; //18位校验及大写校验 ...
- springboot~国际化Locale正确的姿势
Java中的Locale.getDefault()获取的是操作系统的默认区域设置,如果需要获取客户端浏览器的区域设置,可以从HTTP头中获取"Accept-Language"的值来 ...
- 使用 React Three Fiber 和 GSAP 实现 WebGL 轮播动画
参考:Building a WebGL Carousel with React Three Fiber and GSAP 在线 demo github 源码 效果来源于由 Eum Ray 创建的网站 ...
- Python基础 - 比较运算符
以下假设变量a为10,变量b为20: 运算符 描述 实例 == 等于 - 比较对象是否相等 (a == b) 返回 False. != 不等于 - 比较两个对象是否不相等 (a != b) 返回 tr ...
- Linux系统 2023年5月1号
今天正式进入了LINUX基础核心 下载了centos7.4镜像 和vmware12版本,还未安装vmware和centos镜像7.4
- ARC144
ARC 144 比赛情况:一眼订正,鉴定为做起 \(3\) 道题. A - Digit Sum of 2x \(2x\) 进位就不满足 \(M\) 最大的条件了,所以 \(x\) 不能进位. 然后要求 ...
- 一次有关 DNS 解析导致 APP 慢的问题探究
目录 一.业务背景 二. 问题 三.问题排查 3.1.问题一: 基于DNS 延迟的解析 3.2.问题二:HTTPDNS侧 HTTPDNS基础理论 相关问题 四.优化方向 4.1.域名解析配置 4.2. ...