精华内容
下载资源
问答
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个v-bing:class="{...

    今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分

    首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式

    先看下面的第一个小实例:

    6f1d90dbd2f08a0d141eb646aefaea8b.png

    源代码 html 文件:

    请看注释

    VueLearn-cnblogs/xpwi

    动态绑定 css 样式

    实例1

    实例2

    源代码 css 文件:

    .red{

    color: red;

    }

    .change{

    background-color: yellow;

    }

    第二个小实例:

    实现,鼠标放上去,修改背景色

    ca6e0624cb3b092cc86911d35481d4d2.gif

    源代码 html 文件:

    VueLearn-cnblogs/xpwi

    动态绑定 css 样式

    实例1

    实例2

    源代码 js 文件:

    //实例化 vue 对象

    new Vue({

    //注意代码格式

    //el:element 需要获取的元素,一定是 html 中的根容器元素

    el:"#vue-app",

    data:{

    dataRed : true,

    dataChange : false

    },

    methods:{

    }

    });

    源代码 css 文件:

    .red{

    color: red;

    }

    .change{

    background-color: yellow;

    }

    上面的动态,大家可以看到是通过修改样式的 打开和关闭

    实例二:

    974030d438098b8b8a5e669c7bed16ea.gif

    源代码 html 文件:

    VueLearn-cnblogs/xpwi

    动态绑定 css 样式

    实例1

    实例2

    源代码 js 文件:

    //实例化 vue 对象

    new Vue({

    //注意代码格式

    //el:element 需要获取的元素,一定是 html 中的根容器元素

    el:"#vue-app",

    data:{

    dataRed : true,

    dataChange : false,

    changeHeight : false

    },

    methods:{

    }

    });

    源代码 css 文件:

    .red{

    color: red;

    }

    .change{

    background-color: yellow;

    }

    .yellowBG{

    width: 20%;

    background-color: yellow;

    }

    .changeHeight{

    width: 20%;

    height:100px

    }

    总结

    以上所述是小编给大家介绍的Vue 框架之动态绑定 css 样式实例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • VUE动态绑定Css样式、Style行内样式

    千次阅读 2020-08-15 14:42:20
    VUE动态绑定Css样式、Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue的样式问题,一直以来这一块自己也没有好好...

    VUE动态绑定Css样式、Style样式

    一、背景

    这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue的样式问题,一直以来这一块自己也没有好好的总结过,特此总结。

    二、栗子

    思路,主要是在data、methods、computed三个地方定义变量、方法或者计算属性来给出指定的背景。
    (1)css动态样式(data数据)

    <template>
    	<view>
    		<view :class="{bgOne:isCheck,bgTwo:!isCheck}">2323</view>
    		<button @click="changeBg">切换</button>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				isCheck:true
    			}
    		},
    		methods:{
    			changeBg(){//改变背景
    				this.isCheck = !this.isCheck
    			}
    		}
    	}
    </script>
    
    <style >
    	.bgOne{
    		background-color: red;
    	}
    	.bgTwo{
    		background-color: green;
    	}
    </style>
    

    在这里插入图片描述
    点击切换按钮切换背景
    (2)css动态样式(methods)

    <template>
    	<view>
    		<view v-for="(item,index) in ['A','B','C']" :class="{bgOne:selectBg(index),bgTwo:selectBg(index+1),bgThree:selectBg(index+2)}">{{item}}</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    			
    			}
    		},
    		methods:{
    			selectBg(i){
    				if((i+1)%3==1){
    					return true
    				}else{
    					return false
    				}
    			}
    		}
    	}
    </script>
    
    <style >
    	.bgOne{
    		background-color: red;
    	}
    	.bgTwo{
    		background-color: green;
    	}
    	.bgThree{
    		background-color: blue;
    	}
    </style>
    

    效果展示:
    在这里插入图片描述
    (3)css动态样式(computed)

    <template>
    	<view>
    		<view :class="{bgOne:setBg}">2323</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    			}
    		},
    		methods:{
    		},
    		computed:{
    			setBg(){
    				return true
    			}
    		}
    	}
    </script>
    
    <style >
    	.bgOne{
    		background-color: red;
    	}
    </style>
    

    在这里插入图片描述
    (4)行内style动态样式(data数据)

    <template>
    	<view>
    		<view :style="{backgroundColor:bgColor}">2323</view>
    		<button @click="changeBg">切换</button>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				bgColor:'green'
    			}
    		},
    		methods:{
    			changeBg(){//改变背景
    				this.bgColor= 'red'
    			}
    		}
    	}
    </script>
    
    <style >
    
    </style>
    

    在这里插入图片描述
    点击切换按钮切换背景
    (5)行内style动态样式(methods)

    <template>
    	<view>
    		<view v-for="(item,index) in ['A','B','C']" :style="{backgroundColor:selectBg(index)}">{{item}}</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    			
    			}
    		},
    		methods:{
    			selectBg(i){
    				if((i+1)%3==1){
    					return 'red'
    				}else if((i+1)%3==2){
    					return 'green'
    				}else{
    					return 'blue'
    				}
    			}
    		}
    	}
    </script>
    
    <style >
    
    </style>
    

    效果展示:
    在这里插入图片描述
    (6)行内style动态样式(computed)

    <template>
    	<view>
    		<view :style="{backgroundColor:bgColor}">2234</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    			
    			}
    		},
    		computed:{
    			bgColor(){
    				return 'green'
    			}
    		}
    	}
    </script>
    
    <style >
    
    </style>
    

    在这里插入图片描述

    三、总结

    (1)加bind的符号“:”
    (2)

    展开全文
  • vue中修改css样式添加CSS样式

    万次阅读 2018-09-04 10:32:39
    a表示添加css样式,f 表执行条件,满足条件就添加写好的Css样式。用于添加Css样式 style语法格式=&amp;amp;amp;gt; :style=”{ ’ Q ’ : R }” Q表示具体修改的Css样式,R表示修改的值。用于修改CSS某一个...

    这里写图片描述

    calss语法格式=> :class=”{ ’ a ’ : f }”
    a表示添加的css样式,f 表执行条件,满足条件就添加写好的Css样式。用于添加Css样式

    style语法格式=> :style=”{ ’ Q ’ : R }”
    Q表示具体修改的Css样式,R表示修改的值。用于修改CSS某一个样式。

    展开全文
  • 情况一: 查看.html文件中&lt;head&gt;标签是否有被注释。 情况二: 。。。

    情况一:

    查看.html文件中<head>标签是否有被注释。

    情况二:

    。。。

    展开全文
  • 1.动态设置div的class 可以通过传给:class一个对象,以动态地切换class <div :class="{ active: isActive,'text-danger': hasError }"></div> 上面表示active这个class是否存在。取决于数据...
  • vue项目之CSS样式

    千次阅读 2020-05-14 23:56:51
    vue项目中CSS样式 初始化页面样式 注意: element-UI中提供的组件,组件名称就是类名 .el-header{} 页面单独的样式,从外部引入css <style scoped> @import '../assets/css/member.css'; </...
  • Vue.js 动态绑定CSS样式

    万次阅读 2018-07-30 15:54:23
    a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式) html &lt;!--vue-app是根容器--&gt; &lt;div id="vue-app"&gt; &lt;input type="button...
  • vue 规范:CSS 样式

    2020-05-19 18:23:32
    此篇文章会跟随 迷心 一起成长,随时记录和修改对vue-CSS样式的使用心得和想法 在vue中的样式覆盖问题,往往令人头痛。每当在dev环境下调好的页面发布后,总是处想各种奇奇怪怪的问题,每次都会让 我 薅着不多的...
  • Vue动态添加css

    千次阅读 2018-08-03 17:23:29
    第一步:在元素中绑定动态样式 1.添加单个样式 &lt;div class="addInvTitle" :class="lightBlue"&gt; 2.添加多个样式 &lt;div id="addInvite" class="addInvite...
  • vue项目上线css样式乱掉 之前一个项目中,vue开发的,在本地做好了,可是打包上线的时候,首页样式塌陷了,但是在控制台看样式的时候,样式是存在的, 很烦 很烦 烦 找不出原因 去问了问度娘 我的原因是main.js文件中.引用...
  • vue动态点击切换css样式并子元素动态显示和隐藏 <template> <div v-for="i in 5" class="el-personal" :class="{active:isActive==i}" @click="show(i)">切换css样式 <div @click="clickbj(i)...
  • VUE 引入公共css样式的方法

    千次阅读 2018-11-23 09:36:31
    初学vue,在项目中引入公共css样式的时候发现在index.html页面直接使用 &lt;link rel="stylesheet" type="text/css" href="./src/css/index.css"&gt; 引入样式是无效的,通过...
  • 1、在Vue中使用CSS样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式</title> <style> /*v-cloak:解决加载闪烁时出现的Vue标签...
  • 2.引入文件,在app.vue添加如下: <template> <div id="app"> <router-view /> </div> </template> <style lang="scss"> //取消页面的默认外边距。 body { margin: 0; ...
  • vue中改变css样式 利用ref

    千次阅读 2020-07-15 16:42:24
    this.$refs.ref对应得名字.style.height = h +‘px’;
  • vue + vant css样式失效

    2020-09-03 16:46:25
    在项目根目录中 .babelrc 添加, [“import”,{“libraryName”:“vant”,“style”:true}]
  • 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白,如有不对的地方轻喷,只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
  • Vue 框架-05-动态绑定 css 样式

    千次阅读 2018-11-13 23:45:13
    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢...
  • 实现绑定css样式的方法: 在data中设定一个值,比如changColor:false,然后就可以在容器中添加入下命令: 意思是点击这个div盒子后,里面的class就会显示出来,然后颜色就会变成你设定的,再次点击就还原 <...
  • 项目前端使用vue.js和element-ui,由于想要对输入框进行验证,输入值非法时输入框颜色变红,就想要根据el-input编译 后的class进行修改,但是直接在html页面中调用class无效,在网上查资料后,发现把html中的<...
  • 解决VUE动态改变CSS样式不生效

    千次阅读 2017-07-25 10:19:00
     可以实现动态改变CSS样式,但是发现不刷新的话CSS样式不改变,但是lot方法是在跑的  解决办法是: 在父组件中删除与子组件中同名的css类名 (按理说我在组件中写的css都是scoped,不应该影响组件间的,但是...
  • vue动态设置css样式

    千次阅读 2020-10-10 16:11:21
    前言: 在实际开发时,经常会遇到需要动态更换css样式的情况,比如今天自己在练习时遇到的一个简单的小问题,就是切换tab后动态的修改选中后的字体颜色,没有做成控件,就用a标签做的。 ...
  • vue 动态添加样式

    万次阅读 2018-06-15 14:51:02
    vue实现点击切换改变样式 html代码:根据数据动态循环一个列表 &lt;ul&gt; &lt;li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':...
  • vueCli引用css样式的两种方式

    千次阅读 2020-03-29 11:30:49
    在webpack中,所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分代码,然后它根据lang属性自动判断出要使用的loaders。所以,其实只要安装处理sass/scss的loader。就能在vue...
  • 这是一个用vue.js对css操作完成的实例。当然用了flex简单布局。一、先创建一个html文件,记得添加vue库文件。二、创建一盒容器vmdiv,用vue绑定它,测试vue绑定后的插入值text1效果。三、加入文本框和两个按钮。四、...
  • vue引入字体css报错的解决办法:1、在用到的地方引入字体的样式文件;2、把“font.styl”改为“font....利用 vue-cli 搭建的项目平台利用stylus写的css样式有 css-loader 依赖包x下图是 webpack.base.conf.js 关于字...
  • 我一共有五个页面,采用了异步路由加载,后四...但是npm run build打包以后的文件就不行了,webpack并没有将异步路由的vuecss文件给抽取出来,只抽取了用import方式引入组件的css,也就是index的css。我后面将异步...
  • Vue 动态修改dom样式

    千次阅读 2019-04-08 13:40:20
    Vue 动态修改dom样式
  • vue 添加css样式的三种方式

    千次阅读 2020-07-02 15:27:57
    1. 内部样式表 在 .vue文件里直接写 2. 外部样式表 1.在pulic文件加下创建 2.在vue文件中引用 3. 在 public/index.html文件中引入 这里引入的是 公共组件,对整个项目都有效 一边在哪里用,在哪里引入/写。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,520
精华内容 18,608
关键字:

vue动态添加css样式

vue 订阅