精华内容
下载资源
问答
  • 今天的小实例是关于 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样式代码

    万次阅读 2019-09-06 18:43:13
    问题描述: 一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变...toast_tips 表示该元素的基础样式,写在css中,toast_tips_style表示附加样式,需要在js中动态写入 <div v-show="toast" class...

    问题描述:

    一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候css代码就不能直接写,需求如下:
    要实现的效果

    解决方案:

    1. 先给弹窗写基础样式,定位信息可以不写

    toast_tips 表示该元素的基础样式,写在css中,toast_tips_style表示附加样式,需要在js中动态写入

     <div v-show="toast" class='toast_tips' :style="toast_tips_style" @click="hideToast">
            <p>xxxxxxxx</p>
          </div>
    
     .toast_tips{
          position: absolute;
          width:5.12rem;
          height:1.44rem;
          display: flex;
          flex-direction: column;
          align-items: left;
          padding-top: 0.4rem;
          padding-left: 0.213333rem;
          background: url('../../../static/images/partner/freeze.png') no-repeat center/100%;
          >p{
            font-size:0.32rem;
            font-family:PingFangSC;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:16px;
          }
        }
    
    1. data中写入toast_tips_style附加样式结构
     data () {
        return {
          toast:false,
          //增加的附加样式,这里就是动态增加定位样式
          toast_tips_style:{
            left: '',
            top:''
          },
     }
    
    1. js中给toast_tips_style动态样式设置数据

    找到定位元素的参照物,利用 this.$refs获取参考元素rt_dom和目标元素faq_dom的dom节点,找到参考元素的定位信息
    根据参考元素和目标元素的位置关系,动态设置目标元素的位置信息

    div class="rt" ref="rt_dom">
    <span ref="faq_dom"  class="faq" @click="show_toast"></span>
    
     show_toast:function(event){
            this.toast = true;
            //获取当前屏幕宽度px
            var screen_width = document.body.clientWidth;
            var el = event.currentTarget;
            var rt_dom = this.$refs.rt_dom.offsetHeight;
            var faq_dom = this.$refs.faq_dom.offsetLeft;
            //计算出的定位信息px转rem
            this.toast_tips_style.left=(faq_dom-145)*10/screen_width+'rem'
            this.toast_tips_style.top=(rt_dom-8)*10/screen_width+'rem'
        },
    

    PS:如果你不想js中去写css代码,你也可以用一个相对位置的div去包含一个绝对位置的div,定位信息可以使用负数的方式去矫正定位。

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

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

    这里写图片描述

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

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

    展开全文
  • 当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们动态修改的值为负数的时候 <view :style="[{ 'margin-top':'-'+ height...
  • 修改css不生效 使用 !important也不生效时 使用 /deep/ /deep/#qrcode{ width:200px; }
  • vue改变css样式 利用ref

    千次阅读 2020-07-15 16:42:24
    this.$refs.ref对应得名字.style.height = h +‘px’;
  • 1.动态设置div的class 可以通过传给:class一个对象,以动态地切换class <div :class="{ active: isActive,'text-danger': hasError }"></div> 上面表示active这个class是否存在。取决于数据...
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class=...
  • 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白,如有不对的地方轻喷,只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
  • 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样式

    2021-04-01 18:11:10
    vue动态点击切换css样式 <template> <div v-for="i in 5" class="el-personal" :class="{active:isActive==i}" @click="show(i)"> 切换css样式 </div> </template> <script>...
  • vue 规范:CSS 样式

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

    千次阅读 2019-04-08 13:40:20
    Vue 动态修改dom样式
  • 解决VUE动态改变CSS样式不生效

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

    2020-06-07 09:22:24
    <!... <... <head> ...meta charset="utf-8">...Vue 测试实例 - 菜鸟教程(runoob.com)...script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .btncolor{ backgr...
  • vue写法改变css样式

    千次阅读 2018-08-09 15:22:37
    vue的数据驱动视图的写法来改变css样式,而不是通过demo的方式来改变 html: &lt;router-link to="/home/energy"&gt; &lt;div @click="energy(1)" :class="['hexagon...
  • Vue格式化CSS样式

    千次阅读 2020-05-31 18:29:27
    格式化CSS样式是为了书写方便,易读。如果不想费事儿,可以不用格式化。特点呢就是层叠关系明显。废话不多说,接下来看看如何安装并使用 安装依赖         主要安装两个...
  • 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

    2017-07-13 16:45:00
    <div v-for="i in resultDate" v-if="i.ProjectId>='4'" @click=EveyTesttInfo(i.Name,i.ProjectId)> <img v-bind:src="i.ProjectId | formatIconImg"> <p>{{i.Name}}<...
  • 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; 引入样式是无效的,通过...
  • Vue动态绑定CSS样式

    2019-02-12 11:31:00
    动态绑定CSS样式 h2 > 19 < div > 20 < h4 > 示例一 h4 > 21 < div v-on:click ="varChangeColor = !varChangeColor" v-bind:class ="{changeColor:varChangeColor}" > 22 < span > 点击切换...
  • 想要动态修改css样式就得能动态的给<style></style>赋值,可是<style></style>里面又写不了变量(有可能可以但是我不会。。),所以想了个这种办法,通过给模板文件的:style动态复制从而...
  • 改变input的placeholder颜色为例子 <div class="red_bg"> <input ref="is" type="text" ...设置事件,动态更新css的值 mounted() { // 解决input颜色问题 this.$refs.is.style.setProperty( 'p.
  • vue + vant css样式失效

    2020-09-03 16:46:25
    在项目根目录中 .babelrc 添加, [“import”,{“libraryName”:“vant”,“style”:true}]
  • 用run dev build打包后,发现样式改变了,最终发现addAdress.vue和myAdress.vue中的有个类名是相同的,但是想着...一.css样式发生改变的scoped属性:1)加了scoped属性的组件,可以维护当前组件样式不受其它组件影响...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,241
精华内容 15,696
关键字:

vue动态修改css样式

vue 订阅