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 ...
随机推荐
- 解决Kibana(OpenSearch)某些字段无法搜索问题
背景 最近在OpenSearch查看线上日志的时候,发现某个索引下有些字段无法直接在界面上筛选,搜索到也不高亮,非常的不方便,就像下面这样 字段左侧两个筛选按钮禁用了无法点击,提示 Unindexed ...
- 为HttpClient开启HTTP/2
.Net Core在调用其他服务时,调用通常使用HttpClient,而HttpClient默认使用HTTP/1.1 . 配置 HttpClient 以使用 HTTP/2 h2 连接 自 .NET C ...
- Java SE 20 新增特性
Java SE 20 新增特性 作者:Grey 原文地址: 博客园:Java SE 20 新增特性 CSDN:Java SE 20 新增特性 源码 源仓库: Github:java_new_featu ...
- MQTT-保留消息和遗嘱消息
保留消息 为什么需要保留消息 如果不考虑持久会话的因素,那么MQTT订阅只有在客户端连接之后才能创建,所以服务端不能提前预知某个主题会被哪些服务端订阅或者某个客户端会订阅哪些主题,所以当消息到达服 ...
- Vue3项目的打包运行
一.项目打包(vite创建的项目) 执行以下这条命令对项目进行打包 npm run build 生成dist文件夹,进入dist文件夹下的index.html文件,然后右键选择Open with Li ...
- 2023-04-24：用go语言重写ffmpeg的muxing.c示例。
2023-04-24:用go语言重写ffmpeg的muxing.c示例. 答案2022-04-24: 本程序的大体过程如下: 打开输出文件并写入头部信息. 添加音频和视频流,并为每个流创建 AVCod ...
- 2021-04-21：手写代码：Dijkstra算法。
2021-04-21:手写代码:Dijkstra算法. 福大大 答案2021-04-21: Dijkstra算法是一种基于贪心策略的算法.每次新扩展一个路程最短的点,更新与其相邻的点的路程.时间紧,未 ...
- 2021-09-07：单词接龙 II。按字典 wordList 完成从单词 beginWord 到单词 endWord 转化，一个表示此过程的 转换序列 是形式上像 beginWord -＞ s1 -
2021-09-07:单词接龙 II.按字典 wordList 完成从单词 beginWord 到单词 endWord 转化,一个表示此过程的 转换序列 是形式上像 beginWord -> s ...
- Rocky 9 Linux 平台 vim 9.0 源码包编译安装踩坑记录
目录 vim 9.0 部署准备环境 vim 9.0 源码包正式部署 vim 9.0 初体验 plug-vim 安装插件 在上一篇 <vim入门实战> 篇,我并没有介绍 Linux 平台源码 ...
- 使用weexplus + vue开发APP的填坑之旅
最近需要撸一个app来满足用户的需求,找来找去发现flutter不错,决定用它但是时间不够(准备挤出时间再去研究flutter),进度又催得紧,最后决定选weex这个上手快些,说干就干打开官网跟着ap ...