精华内容
下载资源
问答
  • 我就废话不多说了,大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • 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...

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      <style>
      .btncolor{
        background: red
      }
      </style>
    </head>
    <body>
    <div id="app">
       <!-- `greet` 是在下面定义的方法名 -->
      <button id="btn" class="btncolor" :style="classObject" v-on:click="greet">Greet</button>
    </div>

    <script>
    var app = new Vue({
      el: '#app',
      data: {
        classObject: {

          background:''
        }
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function (event) {
          alert(1111)
          if(this.classObject.background!='#ffffff')
        this.classObject.background='#ffffff';
        else {
            this.classObject.background='#000000';
        }
        alert(222222);
          }
    }
    })

    </script>
    </body>
    </html>

    展开全文
  • 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}}<...
    <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}}<br> {{i.Result|formatNull}} {{i.ProjectId|formatUnit}}</p>
            <span style="color:#d55e36" v-if="i.Rank==1">{{i.Rank|formatRank}}</span>
            <span style="color:#01a89e" v-else>{{i.Rank|formatRank}}</span>
     </div>

    没错!就是 v-if

    转载于:https://www.cnblogs.com/yancongyang/p/7161368.html

    展开全文
  • vue动态修改css样式代码

    万次阅读 2019-09-06 18:43:13
    一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候css代码就不能直接写,需求如下: 解决方案: 先给弹窗写基础样式,定位信息可以不写 toast_tips ...

    问题描述:

    一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候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,定位信息可以使用负数的方式去矫正定位。

    展开全文
  • 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> [removed][removed] <style> #bag{ width: 200px;...background-image: url(img
  • vue动态设置css的样式

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

    前言:

    在实际开发时,经常会遇到需要动态更换css样式的情况,比如今天自己在练习时遇到的一个简单的小问题,就是切换tab后动态的修改选中后的字体颜色,没有做成控件,就用a标签做的。

     点击帐号登录:

     

     点击扫码登录:

    tab的字体颜色动态改变方法:

    html的主要部分:

     <div class="nav-tabs">
          <a href="javascript:void(0);" @click="click_account_login" :class="{current: isShowAccountLogin }">帐号登录</a>
          <span class="line"></span>
          <a href="javascript:void(0);" @click="click_code_login" :class="{current: !isShowAccountLogin }">扫码登录</a>
     </div>

    script涉及部分: 

    export default {
      data () {
        return {
          isShowAccountLogin: true,
        }
      },
      methods: {
        click_account_login () {
          this.isShowAccountLogin = true;
        },
        click_code_login () {
          this.isShowAccountLogin = false;
        }
      }
    }

    style主要部分:

      .current {
        color: #ff6700;
      }

    思路: 

    设置了一个变量isShowAccountLogin来判断是选中了哪个,从而控制显示的内容及显示字体颜色,是不是很简单。

    展开全文
  • vue.js动态改变css

    万次阅读 2018-10-10 21:02:07
    我们都知道Vue.js有一个特性是数据驱动视图,这样我们就不用再去修改dom,那么如何在不通过dom的情况下去动态改变我们的样式,官网给了我们几种方式,在这里我写了几个例子实现了一下(使用vue-cli): 1、在data()...
  • vue动态修改css其中一个属性值

    千次阅读 2019-06-07 22:38:04
    <!--此div的高度取屏幕可视区域的高度-->   ...-- Add "scoped" attribute to limit CSS to this component only --> .hello{  width: 100%;  background-color: #42b983; }  
  • 已有的css样式 动画效果是2s时间由透明变为不透明; 修改后的动画效果 styleSheets对象 Document.styleSheets 只读属性, 返回一个由 StyleSheet 对象组成的 StyleSheetList, 每个 StyleSheet 对象都是一个文档...
  • 改变input的placeholder颜色为例子 <div class="red_bg"> <input ref="is" type="text" ...设置事件,动态更新css的值 mounted() { // 解决input颜色问题 this.$refs.is.style.setProperty( 'p.
  • 在div中 使用 :style="{'属性':值}" 的格式进行动态设置css的属性 <template> <div class="courseitem"> <div class="color" :style="{'background':examClolr ,'box-shadow': examShadow }">...
  • Vue 动态改变css 属性 -- 颜色

    万次阅读 2018-10-29 22:56:56
    例如:在for循环中改变span 颜色 &lt;div id="app"&gt; &lt;div v-for="item in items"&gt; &lt;span :style="{'color':item.color}"&gt;item.name&...
  • 使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;接下来通过本文给大家分享Vue.js中对css的操作(修改)具体方式,感兴趣的朋友跟随小编一起看看吧
  • " :class="{'active':idx == index}">{{item.name}}a> li> ul> Javascript代码: var app = new Vue({ el:"#app", router, data:{ m:"hello vue.js", active:'2', idx:'0', //默认选择首页 headerList:[ ...
  • vue动态切换css

    千次阅读 2020-08-11 14:58:08
    vue动态切换css vue通过class与style绑定来动态切换css 我们可以传给 v-bind:class 一个对象,以动态地切换 class: <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 ...
  • 想要动态修改css样式就得能动态的给<style></style>赋值,可是<style></style>里面又写不了变量(有可能可以但是我不会。。),所以想了个这种办法,通过给模板文件的:style动态复制从而...
  • VUE项目中CSS设置动态宽度的方法

    千次阅读 2020-07-15 11:13:06
    首先你务必看Vue的官方文档。涉及到的基础知识有: 绑定内联样式的使用 computed的使用 文档写的都是基础使用。那么在项目实战中如何使用,2步就能实现,下面提供一个参考方案: 需求场景:获取当前手机屏幕高度,...
  • vue动态绑定css样式和class名

    千次阅读 2019-12-27 10:18:05
    有的时候,需要根据后端传来的不同的值来写不同的样式,我的需求是在一个页面有一个评分,传给后台,在另一个页面获取传的这个值,根据这个值来判断哪个选项加粗。 代码: <tr> <td class="bigT " ...
  • 诸如在js中,我们根据某个条件,或者触发某个方法,去动态改变某个样式。 那么,在vue中,我们更能很轻松的达到这点。 看下常见的几种情景: 情景一:我们需要根据某个变量是否存在(触发),去动态添加样式 描述:...
  • 当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们动态修改的值为负数的时候 <view :style="[{ 'margin-top':'-'+ height...
  • 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某一个样式。...
  • 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白,如有不对的地方轻喷,只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
  • Vue动态加载css、js、字体

    千次阅读 2020-08-25 11:37:58
    //动态加载css loadStyle(url) { var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = url; //css链接 var head = document.getElementsByTagName('...
  • 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样式 利用ref

    千次阅读 2020-07-15 16:42:24
    this.$refs.ref对应得名字.style.height = h +‘px’;
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class=...
  • VUE动态绑定Css样式、Style行内样式

    千次阅读 2020-08-15 14:42:20
    VUE动态绑定Css样式、Style样式 一、背景 这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法...(1)css动态样式(data数据) <template> <view> <view :cla
  • 修改css不生效 使用 !important也不生效时 使用 /deep/ /deep/#qrcode{ width:200px; }
  • Vue动态绑定CSS

    千次阅读 2019-05-10 15:26:08
    操作元素的 class 列表和内联样式是数据绑定...因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。 下面介绍绑定html class中的对象语法 <di...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 79,436
精华内容 31,774
关键字:

vue动态修改css

vue 订阅