精华内容
下载资源
问答
  • vue动态绑定css样式和class

    千次阅读 2019-12-27 10:18:05
    有的时候,需要根据后端传来的不同的值来写不同的样式,我的需求是在一个页面有一个评分,传给后台,在另一个页面获取传的这个值,根据这个值来判断哪个选项加粗。 代码: <tr> <td class="bigT " ...

    有的时候,需要根据后端传来的不同的值来写不同的样式,我的需求是在一个页面有一个评分,传给后台,在另一个页面获取传的这个值,根据这个值来判断哪个选项加粗。
    在这里插入图片描述
    代码:

    <tr>
                             <td class="bigT  " colspan="6" style="font-size: 17px;font-weight: bold">一、老师总评:</td>
                             <td class="bigT1 "  colspan="24" style="font-size: 17px">
                                 <span v-for="(item,index) in overall"  key="item.value" 
                                       :style="item.value==ruleForm.overallRating? style1:''">{{item.label}}</span>
                             </td>
                         </tr>
    先在data写个数组,v-for循环,ruleForm.overallRating是从后台取的值,判断是否相等,再在data里写个style样式
    data() {
      return {
        overall:[
                    {value:0,label:"优秀"},
                    {value:1,label:"良好"},
                    {value:2,label:"及格"},
                    {value:3,label:"不及格"},
                ],
    	style1:{
                    'font-weight':"bold",
                    'font-size':18+"px"
                },
      }
    }
    
    

    绑定class也差不多

    :class="{ 'active': isActive, 'sort': isSort }"
    data() {
      return {
        isActive: true,
        isSort: false
      }
    },
    也可以这样
    :class="classObject"
    data() {
      return {
        classObject:{ active: true, sort:false }
      }
    }
    或者
    :class="[isActive?'active':'']"
    data() {
      return {
        isActive: true
      }
    },
    又或者这样
    :class="[isActive,isSort]"
    data() {
      return{
        isActive:'active',
        isSort:'sort'
     }
    }
    

    希望对你有帮助!

    展开全文
  • css样式中@的使用 - 动态绑定class 引入图片常用写法 <div class="img-a"></div> css <style scoped lang="less"> .container { background-color: #fffaf6; .img-a { width: 375px; height...

    css样式中@的使用 - 动态绑定class

    引入图片常用写法
    <div class="img-a"></div>
    

    css

     <style scoped lang="less">
    .container {
        background-color: #fffaf6;
        .img-a {
            width: 375px;
            height: 224px;
            position: absolute;
            background: url(../../assets/bg_ing.png) no-repeat center / cover;   //相对路径引入
            // z-index: -1000;
          }
    }
    </style>
    
    @自定义路径名称引入–通常用在动态绑定样式中使用
      <div v-bind:class="month_class"></div>
    

    data

    data(){
        return{
          month_class: "",
          month_dict: {
                一月: "img-a-1",
                二月: "img-a-2",
                三月: "img-a-3",
                四月: "img-a-4",
                五月: "img-a-5",
                六月: "img-a-6",
                七月: "img-a-7",
                八月: "img-a-8",
                九月: "img-a-9",
                十月: "img-a-10",
                十一月: "img-a-11",
                十二月: "img-a-12",
              },
        }
    }
    

    methods

    取res

     created() {
        this.getRegulation();
      },
      methods: {
        async getRegulation() {
          try {
            // let res = await this.$http.get("/cms/regulation/listAndr", {
            //   id: this.$route.query.id,
            // });
            let res = await this.$http.get(
              "/cms/regulation/listAndr?id=32位或64位-数字和大小写字母组合"
            );
              console.log(res.month)  //打印显示为  七月
            this.month_class = this.month_dict[res.month];
            console.log(this.month_class);
            this.$emit("regulationMonth", res.month);
            // this.title = "业务动态" + res.month;
            console.log(res);
            delete res.month;
            let reguListResult = [];
            Object.keys(res).map((v) => {
              let obj = {};
              if (res[v].length != 0) {
                obj.title = v;
                obj.children = res[v];
                reguListResult.push(obj);
              }
            });
            this.reguList = reguListResult;
          } catch (err) {
            throw new Error(err);
          }
        },
    

    [] -取对象属性的用法

    methods:{
         this.month_class = this.month_dict[res.month];  // [res.month]  在对象中取某一属性的具体值
                console.log(this.month_class); //显示为  img-a-7
    }
    

    css

     <style scoped lang="less">
    @banner_img07: "../../assets/banner_07.png";  //也可以放在.img-a-7的同层级
    .container {
        background-color: #fffaf6;
      .img-a-7 {
        width: 375px;
        height: 224px;
        position: absolute;
        background: url(@banner_img07) no-repeat center / cover;  //自定义路径名称引入使用
      }
    }
    </style>
    
    展开全文
  • 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.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...

    第一种方法:

    v-bind:class="{a:b,c:b}"     a c 代表CSS样式表里相应的样式名       b 代表true(启用此样式)/false(不启用此样式)
    

    html

        <!--vue-app是根容器-->
        <div id="vue-app">
            <input type="button" v-on:click="a=!a" v-bind:class="{changeColor:a,changeWidth:a}" value="change!">
        </div>

      css

    .changeColor{
        background: brown;
        color: #ffffff;
    }
    .changeWidth{
        width: 200px;
    }

       js

    //实例化vue对象
    new Vue({
        el:"#vue-app",
        data:{
            a:false
        },
        methods:{},
        computed:{}
    });

    效果图

    点击按钮后

    再次点击按钮后将恢复到初始样子

     

    第二种方法

    html

        <!--vue-app是根容器-->
        <div id="vue-app">
            <input type="button" v-on:click="a=!a" v-bind:class="change" value="change">
        </div>

    css文件与上面一样
     

    JS

    //实例化vue对象
    new Vue({
        el:"#vue-app",
        data:{
            a:false
        },
        methods:{},
        computed:{
            change:function(){
                return {
                    changeColor:this.a,
                    changeWidth:this.a
                }
            }
        }
    });

    效果图与上面一样

     

    如果您有什么不明白的地方其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

    ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验调色设定,欢迎交流,哈哈哈哈哈

     

     

    展开全文
  • Vue 框架-05-动态绑定 css 样式

    千次阅读 2018-11-13 23:45:13
    今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class=...
  • Vue-动态绑定CSS样式

    2019-05-07 09:49:26
    在这一片博客里面主要讲解了如何通过@:click也就是(v-on:click)来绑定css样式进行动态控制 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
  • 关于点击改变Class,修改css样式

    万次阅读 2018-08-31 14:38:31
    后台管理某模块筛选,产品说要让运营管理起来舒服一些。= = 点击按钮改变颜色,很简单的操作: 首先给button按钮添加class: &lt;button id="audit" class="btn-default"&gt;...
  • 在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav&gt;.navlogin, .navregist { width: 230px; margin:...
  • 实现绑定css样式的方法: 在data中设定一个值,比如changColor:false,然后就可以在容器中添加入下命令: 意思是点击这个div盒子后,里面的class就会显示出来,然后颜色就会变成你设定的,再次点击就还原 <...
  • button class="btn1">month1</button> <button class="btn1">month2</button> <button class="btn1">month3</button> 若要给上面3都具有btn1的class的按钮,添加同样的点击事件...
  • uni-app动态绑定css样式的width

    万次阅读 2019-09-24 15:56:17
    做的项目需要实现一个类似table的功能,但是由于表格的内容不是固定的,如果把css的width写死,就可能导致内容太长而无法全部显示。 解决需求 要解决上述问题就需要动态的改变width 添加内联样式如下: <view ...
  • //一般里面对应一个bool属性,表示是否禁用标签,而样式修改可以在css中自己设置 //通常写法如下例所示 input[disabled]{ color : red; } 利用Class指令实现单个CSS绑定 Class指令只能绑定要给CSSClass...
  • 先写一个改变之后的样式 .active { border-bottom: 2px solid #f00; color: red; } 在xxx.js 里边写下要点击的下边 currentIndex:0, 在 view 里边写 class 样式 <view wx:for="{{label}}" wx:key=...
  • 诸如在css中,我们添加鼠标滑入滑出效果添加不同的样式。 诸如在js中,我们根据某个条件,或者触发某个方法,去动态改变某个样式。 那么,在vue中,我们更能很轻松的达到这点。 看下常见的几种情景: 情景:我们...
  • 动态绑定CSS样式 v-bind:class="{ active: isActive }" 官方文档地址:https://cn.vuejs.org/v2/guide/class-and-style.html <!--绑定了changeColor样式,changeC默认为false,单击变非--> <div v-...
  • 、html部分 <ul> <li v-for="(item,index) in icon_list" :key="index" @click="changeClass(index,item.path)"> <router-link :to="item.path" :class="{ 'active-class': nowIndex === index }...
  • 使用官方的样式绑定比较繁琐,它的css的键通常&lt;style&gt;中的键的写法不一样导致无法再界面上呈现出来,还以为官方的样式绑定不能使用。 &lt;p v-bind:style="{ color: activeColor, ...
  • 动态绑定CSS样式 这部分涉及官方文档中的Class与Style绑定。 index.html &lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on=&...
  • <!DOCTYPE html> <html> <head> ...Vue的样式绑定</title> <meta charset="utf-8"> <script type="text/javascript" src="js/vue.js"></script> &l...
  • 获取iframe 父级id 为objid的内容。 $('#objid',window.parent.document).val(""); 初始化为iframe 父级 id为cancel1绑定事件 ...$('#cancel1',window.parent.document).bind('...设置iframe 父级class为.cover-pa
  • v-bind 中支持绑定一个数组 数组中activeClass和 errorClass对应为data中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>...
  • vue组件内部绑定class还有style样式

    千次阅读 2017-07-17 23:02:19
    vue-cli vue 组件 vue class与style的绑定
  • <ul> <li v-for="(item,index) in icon_list" :key="index" @click="changeClass(index,...router-link :to="item.path" :class="{ 'active-class': nowIndex === index }"> <img :src="item.icon
  • Vue.js学习 Item6 -- Class样式绑定

    千次阅读 2016-07-08 00:03:01
    数据绑定一个常见需求是操作元素的 class 列表它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class ...
  • 话不多说,直接上代码,循环列表,根据选中状态显示不同的样式,active就是你在wxss文件里面创建的类名 <view class="{{item.select ? 'active':''}}" wx:for="{{itemList}}" wx:key="{{item.id}}"> {{...
  • css样式作用域的问题(modules,localIdentName, local global) 在 React项目中 使用 bootsrtap( 使用 sass ) React 中 绑定事件 React中双向绑定事件(e.target.value this.refs.txt.value) React...
  • vue绑定多个class 三元...第一个第二个第三个分别是不同的样式 <div v-for="(item, index) in msgList" :key="index" :class="[index==0?classA:'',index==1?classAa:'',index==2?classAb:'',index>2?classB:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,163
精华内容 23,665
关键字:

绑定一个class和css样式