精华内容
下载资源
问答
  • vue动态绑定样式:style

    千次阅读 2019-06-28 21:19:15
    1.直接在元素上通过:style的形式,书写样式对象<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 在data上定义样式data:{ styleObj1:...

    1.直接在元素上通过:style的形式,书写样式对象
    <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>


    2.将样式对象定义在data中,并直接引用到:style中
    在data上定义样式
    data:{
          styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
    }

    在元素中,通过属性绑定的形式,将样式对象应用到元素中
    <h1 :style="styleObj1">这是一个H1</h1>
    3.在:style中通过数组,引用多个data上的样式对象
    在data上定义样式
    data:{
          styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
          styleObj2:{'font-style':'italic'},
    }

    在元素中,通过属性绑定的形式,将样式对象应用到元素中
    <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
    完整代码:

    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        </head>
    <body>
      <div id='app'>
      
        <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
    
        <h1 :style="styleObj1">这是一个H1</h1>
    
        <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
    
      </div>
    </body>
    <script src="vue.min.js"></script>
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
          styleObj2:{'font-style':'italic'},
        }
      });
    </script>
    </html>

     

    展开全文
  • 今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue如何动态绑定style样式

    千次阅读 2020-07-08 12:06:10
    span v-else class="nvwa-iconfont" :style="{'color':cNodeColor,'font-size': '14px'}" :class="row.flag === 1 ? 'icon-_Txiaoxitishi':'icon-_Tchenggongtishi'"> </span> // :style="{'color':row....
      <span v-else  class="nvwa-iconfont" :style="{'color':cNodeColor,'font-size': '14px'}"
                     :class="row.flag === 1 ? 'icon-_Txiaoxitishi':'icon-_Tchenggongtishi'">
       </span>
       // :style="{'color':row.cNodeColor,'font-size': '14px'}" 此处的写法要注意,容易犯错。
       // style 中的任何属性都可以通过此方式去动态绑定   去修改值
    
    ```javascript
     data() {
            return {
               cNodeColor: '#008ecf',  
            };
        },
    
    展开全文
  • <div class="item" v-for="(item,...div :style="{background:item.value ? '#FFFFFF' : '#000000'}"> </div> </div> 以上是一个简单的循环列表,根据每一项不同的的value值来显示对应的颜色 ...
    <div class="item" v-for="(item,index) in dataList" :key="index">
    	<div :style="{background:item.value ? '#FFFFFF' : '#000000'}">
    	</div>
    </div>
    

    以上是一个简单的循环列表,根据每一项不同的的value值来显示对应的颜色

    展开全文
  • vuestyle样式动态绑定

    万次阅读 2019-08-16 10:58:41
    方法一: ... <div class="videoMa" ref="videoMa" style="width:100%;height:100%;...div id="playWnd" class="playWnd" :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"&...

    方法一:

    (1) html中:

     <div class="videoMa" ref="videoMa" style="width:100%;height:100%;">
     <div id="playWnd" class="playWnd"  :style="{width:videoBox.width+ 'px',height:videoBox.height+ 'px'}"></div>
     </div>

    (2) data中:

     videoBox:{
           width:800,
           height:500,
         }

    (3)mounted中:

      mounted() {
          this.videoBox.width=this.$refs.videoMa.offsetWidth;
          this.videoBox.height=this.$refs.videoMa.offsetHeight;
     }

     

    展开全文
  • vue :style 动态绑定样式

    千次阅读 2020-07-18 19:48:41
    div class="right userPicture" :style="[{'background':`url(${userImg}) no-repeat center`},{'background-size': 'cover'}]"></div> <el-button :style="[{'background-color':`${scope.row.颜色}`}...
  • Vue给标签动态绑定样式class或者style

    千次阅读 2020-07-02 21:05:02
    我的项目中实际使用的是vue+element ui :class :class等同于 v-bind:class 借用Vue官网的解释: <div v-bind:class="[active: isActive ]"></div>...你可以在对象中传入更多字段来动态切换多
  • vue动态添加style样式 注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff ...
  • vue动态绑定样式【三元表达式】

    万次阅读 2018-09-20 11:37:27
    三元表达式 :style="{disabled:!amendPhoneIsShow?'':'disabled'}" 三元表达式和class共存:class="[{'active':navIndex==4},'nav4']" 
  • vue 的 :style 动态绑定样式

    千次阅读 2019-05-09 14:23:01
    vue 的 :style 动态绑定样式 开始我只是想给文字加一个行高: <div class="style" :style="{ height:52px,line-height:52px }"></div> 结果,报错!!! 重写还是报错! 检查符号后,还是报错! ...
  • 静态绑定内联样式 v-bind:style 的对象语法十分直观,CSS属性名可以用 驼峰式 (camelCase) 或 短横线分隔 (kebab-case,记得用引号括起来) 来命名: <div v-bind:style="{ color: activeColor, fontSize: ...
  • Vue动态绑定样式

    2019-10-14 20:48:52
    Vue动态绑定样式——class 1.对象语法 { className:数据模型 } <div :class="{myclass1:show}" id="ss"></div> <script> let vm = new Vue({ el: "#ss", data: { ...
  • VUE动态绑定Css样式Style行内样式

    千次阅读 2020-08-15 14:42:20
    VUE动态绑定Css样式Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue样式问题,一直以来这一块自己也没有好好...
  • el-button class="formButton" @click="switchForm()" v-bind:style="{ color: activeColor,background: activeBackground }">表格</el-button> data activeColor: '#000000', activeBackground: '#...
  • 1.绑定修改字体颜色 <div class="text" :style="{'color':colorText}">111</div> data() { return { colorText: '#EA69A2', }; }, 这样绑定就可以生效了! 2.绑定背景图片 <div class="top" ...
  • :style="1 === 1 ? 'color: red;' : ''
  • vue动态添加style样式

    2020-05-28 17:21:46
    2.除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:’#00a2ff’而不是 backgroundColor:#00a2ff 【对象】 html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }" ...
  • vue 动态绑定样式

    2019-07-12 11:18:55
    常用动态绑定样式: class 先看下官方文档: 对象语法 :class="{ property : truth }" 动态绑定class,我们可以传给v-bind一个对象,动态切换class <div id="app" class="active" :class="{show:isShow,...
  • vue动态绑定多个样式

    千次阅读 2019-12-25 14:21:18
    在项目开发的过程中遇到这样一个需求:有一个节点的状态的显示,使用了element的时间线的组件,但是这个节点的状态有十几种,不同的状态有不同的显示方式,也就是说动态绑定样式。 1、一开始的想法 这原本不复杂,...
  • vue 动态绑定设置元素style 颜色样式

    万次阅读 2019-07-17 13:48:51
    如修改一个按钮的颜色 <el-button circle :style="{'background':colorConfirm,'padding':'7px'}">...设置colorConfirm 的值为需要的颜色样式值 :style="{'background':colorConfirm,'padding':'7px'}" ...
  • vue 动态样式绑定

    2021-07-28 11:38:17
    1. 原始样式 <template> <div id="app"> <h1>示例1 属性绑定</h1> <div class="myStyle">测试</div> </div> </template> <script> export default { ...
  • 1.直接在元素上通过:style的形式,书写样式对象 这是一个H1 2.将样式对象定义在data中,...2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 这是一个H1 3.在:style中通过数组,引用多个data上的样式对象 1:
  • <h5>17.Style内联样式绑定</h5> <div> <p>&lt;div :style="{ co...
  • 有时在项目中需要给动态绑定style中的一些带划线( - )的属性进行赋值,这时因为字符的原因会出现编译错误 错误示范: <view class="statusBar" :style="{margin-top: statusBarHeight}"></view> ...
  • vue动态绑定style

    2021-06-09 16:53:11
    vue动态绑定style值 以修改div背景颜色为例子: <div :style="{ width: '100px', height: '200px', background: bgm, marginBottom: '20px', }" > 然后在data定义 bgm data() { return { bgm: ...
  • div :style="picShow"> <div style="width: 100px;float: left;margin-right: 20px;" v-for="(item,index) in picItem"> <img :src="item" alt="" style="width: 100px;height:100px;border-radius: 5...
  • vue动态绑定style和三目绑定class

    千次阅读 2018-12-12 16:57:57
    style样式绑定,绑定函数返回值 :style="{background:!flag?deep:BackType(sign.status)}" methods: { BackType: function(status) { if (status == "已完成") return "#d7f2e6"; if (status == "工作中") ...
  • //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css"; style.innerText = "@font-face {font-family:'PingFang-Regular';src:url('http:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,421
精华内容 8,968
关键字:

vue动态绑定样式style

vue 订阅