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 ...
随机推荐
- [OpenCV-Python] 21 OpenCV 中的轮廓
文章目录 OpenCV-Python:IV OpenCV中的图像处理 21 OpenCV 中的轮廓 21.1 初识轮廓 21.1.1 什么是轮廓 21.1.2 怎样绘制轮廓 21.1.3 轮廓的近似方 ...
- Python tkinter的简单使用，在绘布上播放GIF和图片
Python tkinter的简单使用,在绘布上播放GIF和图片 文章目录 Python tkinter的简单使用,在绘布上播放GIF和图片 前言 一.tkinter 的简单组件以及pack(),gr ...
- 2022-10-31：以下go语言代码输出什么？A：map[]；B：nil；C：Panic；D：编译错误。 package main import “fmt“ func main() {
2022-10-31:以下go语言代码输出什么?A:map[]:B:nil:C:Panic:D:编译错误. package main import "fmt" func main( ...
- 2022-09-21：有n个动物重量分别是a1、a2、a3.....an， 这群动物一起玩叠罗汉游戏， 规定从左往右选择动物，每只动物左边动物的总重量不能超过自己的重量 返回最多能选多少个动物，求一个
2022-09-21:有n个动物重量分别是a1.a2.a3-an, 这群动物一起玩叠罗汉游戏, 规定从左往右选择动物,每只动物左边动物的总重量不能超过自己的重量 返回最多能选多少个动物,求一个高效的算 ...
- 2021-01-17：java中，HashMap底层数据结构是什么？
福哥答案2020-01-07: 1.7 数组+链表重要字段://HashMap的主干数组,可以看到就是一个Entry数组,初始值为空数组{},主干数组的长度一定是2的次幂,至于为什么这么做,后面会有详 ...
- 2022-05-04：比如，str = “ayxbx“， 有以下4种切法 : a | yxbx、ay | xbx、ayx | bx、ayxb | x， 其中第1、3、4种切法符合：x和y的个数，至少在
2022-05-04:比如,str = "ayxbx", 有以下4种切法 : a | yxbx.ay | xbx.ayx | bx.ayxb | x, 其中第1.3.4种切法符合: ...
- css设置边框四角样式
开发中使用css 伪类 是再常见不过的事情了,运用好了能轻松实现许多复杂的样式,大大减少使用图片消耗带宽的问题,今天我们就使用伪类来实现登录框的四角样式 html代码如下 <div class= ...
- web自动化09-frame切换、多窗口切换
frame切换 1.html代码: <frameset cols="25%,50%,25%"> <frame src="a.htm"> ...
- Git及可视化工具TortoiseGit的安装及使用
前言: TortoiseGit(中文称git小乌龟),是一款开源的git可视化gui工具,让你可以用图形化的界面来使用git,如此即使不会git命令也能流畅的使用git(我就是不想学git命令才使用的 ...
- .net Assembly.Load重复加载程序集造成执行异常
最近ET做热更重载dll的时候,返回登陆会重新检测新的dll,首次登录之前已经Assembly.Load()过一次dll,第二次返回登陆再次load dll到内存中,Invoke执行方法的时候,异常了 ...