精华内容
下载资源
问答
  • 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属性无效

    千次阅读 2019-10-30 18:03:57
    vue修改css属性无效,img设置的宽度无效,p设置的颜色有效 <template> <div> <carousel></carousel> <p> 555555</p> </div> </template>...

    问题描述

    vue中修改css属性无效,img设置的宽度无效,p设置的颜色有效

    <template>
        <div>           
             <carousel></carousel>     
            <p> 555555</p>
        </div>
    </template>
    
    <script>
        import carousel from './carousel.vue';
        export default {
            name: "home",
            components: {
                carousel
            }
        }
    </script>
    
    <style rel="stylesheet/scss" lang="scss" scoped>
    
     img{
            width: 100%;
        }
    p{
        color: red;
    }
    </style>
    

    问题解决过程

    使用F12代码调试
    elements页面,发现img的宽度属性没有覆盖,甚至没有出现,不是权重的问题。
    查看sources,发现css文件里面有我编写的img宽度属性,不是scss编译的问题。

    尝试使用其他标签选择器修改属性,发现修改p标签的属性有效,观察他们两个的区别,发现template中没有img标签,猜测可能时该css只能修改当前组件的属性。

    问题出现原因

    没有仔细查看官方文档,scoped表示当前style只对当前组件有效,避免组件间样式相互影响

    <style scoped>
    </style>
    

    问题解决方案

    • 去除scoped
    • 在对应组件修改img属性
    <template>
        <a-carousel arrows>
            <div
                    slot="prevArrow"
                    slot-scope="props"
                    class="custom-slick-arrow"
                    style="left: 10px;zIndex: 1"
            >
                <a-icon type="left-circle" />
            </div>
            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right-circle" />
            </div>
            <div><img src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/official/about1.jpg"></img></div>
            <div><img src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/official/about1.jpg"></img></div>
            <div><img src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/official/about1.jpg"></img></div>
            <div><img src="https://btsstatic.oss-cn-shanghai.aliyuncs.com/official/about1.jpg"></img></div>
        </a-carousel>
    </template>
    <script>
        export default {};
    </script>
    <style scoped>
        /*样式覆盖*/
        img{
            width: 100%;
        }
        /* For demo */
        .ant-carousel >>> .slick-slide {
            text-align: center;
            height: 160px;
            line-height: 160px;
            background: #364d79;
            overflow: hidden;
        }
    
        .ant-carousel >>> .custom-slick-arrow {
            width: 25px;
            height: 25px;
            font-size: 25px;
            color: #fff;
            background-color: rgba(31, 45, 61, 0.11);
            opacity: 0.3;
        }
        .ant-carousel >>> .custom-slick-arrow:before {
            display: none;
        }
        .ant-carousel >>> .custom-slick-arrow:hover {
            opacity: 0.5;
        }
    
        .ant-carousel >>> .slick-slide h3 {
            color: #fff;
        }
    </style>
    

    感想

    还是对解决问题的流程不够熟悉,导致解决问题耗费过长的时间。

    1. 确认Bug是否在本地可以重现。
    2. 确认Bug在哪一段代码中。
    3. 去除掉所有无关代码,只去调试和Bug相关的代码。
    4. 和之前正常运行的版本对比,尝试恢复到之前可以正常运行的代码。
    5. 重新写一个小Demo,确认是否可以正常运行,可以的话,移动代码到原有的代码中。
    6. 如果本地无法重现,打日志,观察线上行为。
    7. 重启服务,重启IDE,重启笔记本,重启服务器。
    8. 跟产品经理说这个Bug解决不了,花费的代价很大,不值得。
    展开全文
  • vue修改css样式和添加CSS样式

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

    这里写图片描述

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

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

    展开全文
  • 修改配置文件,build/ webpack.prod.cong.js js 、css文件名称增加时间戳。

    一、修改配置文件

    build/ webpack.prod.cong.js

    js 、css文件名称增加时间戳。
    在这里插入图片描述
    在这里插入图片描述

    此时上线部署的话,正在访问的页面可能会报错。
    在这里插入图片描述

    二、监听报错,进行处理

    /router/index.js

    vueRouter.onError((error) => {
        const pattern = /Loading chunk (\d)+ failed/g;
        const isChunkLoadFailed = error.message.match(pattern);
        if (isChunkLoadFailed) {
            window.location.reload();
        } else {
            console.log(error)
        }
    });
    

    监听到报错的话,会重载。

    =============================================================

    方法2:

    在这里插入图片描述
    build >webpack.prod.conf.js:
    template: ‘index.html’, 处, 增加一行: hash: new Date().getTime()

    /router/index.js

    vueRouter.onError((error) => {
        const pattern = /Loading chunk (\d)+ failed/g;
        const isChunkLoadFailed = error.message.match(pattern);
        if (isChunkLoadFailed) {
            window.location.reload();
        } else {
            console.log(error)
        }
    });
    

    监听到报错的话,会重载。

    打包之后,index.html引用的js和css 会增加后缀。
    在这里插入图片描述
    更新版本后, 只要切换路由,就会重新加载。

    展开全文
  • vue项目css修改子组件样式又不会造成全局污染的方法 我们在日常开发过程中,经常会遇到需要修改子组件样式的需求,这个时候我们通常会想到把样式写在不加scoped的style标签中: 但是使用了这种方法后,我们会发现...
  • vue中动态修改css样式代码

    万次阅读 2019-09-06 18:43:13
    一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候css代码就不能直接写,需求如下: 解决方案: 先给弹窗写基础样式,定位信息可以不写 toast_tips ...
  • 项目前端使用vue.js和element-ui,由于想要对输入框进行验证,输入值非法时输入框颜色变红,就想要根据el-input编译 后的class进行修改,但是直接在html页面中调用class无效,在网上查资料后,发现把html中的<...
  • vuecss样式管理

    千次阅读 2019-02-21 17:44:45
    1. Vue中scoped属性的渲染规则: 给DOM节点添加一个不重复的data属性(比如data-v-7ba5bd90)来表示他的唯一性 在每个CSS选择器末尾(编译后生成的CSS)加一个当前组件的data属性选择器(如[data-v-7ba5bd90])来...
  • 我就废话不多说了,大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白,如有不对的地方轻喷,只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
  • vue css样式修改穿透

    2020-04-28 14:47:07
    修改组件样式的时候可能没有效果 加个>>>样式穿透可能会好一些
  • vue结合TailwindCss使用指南 vue-cli项目的安装 vue create vue-css cd vue-css yarn add tailwindcss@1.4.6 新建 tailwind.css,在 src/assets 新建 css 文件夹,并新建 tailwind.css 也可以使用命令 touch src/...
  • 当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们动态修改的值为负数的时候 <view :style="[{ 'margin-top':'-'+ height...
  • vuecss源文件在控制台显示与隐藏是通过config中index中cssSourceMap来控制的,为true就显示 为false无法显示
  • vue修改css属性部分无效,大部分有效,一个span标签的无效,其它页面同样的设置有效 原因分析 由于修改的是elementUI组件的样式,在scope作用域因为权重的问题,elementUI组件相当于子组件,该vue组件相当于父组件...
  • vue中动态修改css其中一个属性值

    万次阅读 2019-01-04 17:03:28
    msg: "Welcome to Your Vue.js App", }; }, computed: { getClientHeight:function () { //屏幕可视区域的高度 let clientHeight = document.documentElement.clientHeight + "px" console.log(...
  • 我就废话不多说了,大家还是直接看代码吧~{{ msg }}export default {data() {return {msg: "Welcome to Your Vue.js App",};},computed: {getClientHeight:function () {//屏幕可视区域的高度let clientHeight = ...
  • vuecss样式的作用范围

    千次阅读 2019-01-15 20:39:12
    vue单文件组件开发中我们通常会在&lt;style&gt;标签上加上scoped属性 &lt;style scoped&gt;, 使用scoped之后样式只影响组件自身,这样可以避免影响到其他组件,如果不加该样式作用范围是全局的。 ...
  • vuecss变量的使用

    万次阅读 2020-01-08 23:18:32
    但相信大多数人写 Vue 用的都是 CSS 预处理器,这里也给出使用预处理器使用这种方案的方法(我这里给出 Sass 的用法,Stylus,Less与之类似) // 只在使用 CSS 变量的时候和前面略有不同 .span2 width: #{'...
  • vuecss样式只在当前vue中生效

    千次阅读 2020-08-26 20:26:39
    在设置style时,会影响到其他组件样式,为避免样式共享,可在样式style标签里添加scoped 即可
  • vue css样式作用域 scope中如何修改element-ui的控件样式 1.我们都知道在vue项目中我们的组件css一般都是写到作用域scoped中,但是我们修改element-ui 控件 比如说el-input的样式时 我们找到当前的class 去改写 不起...
  • vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: &lt;style scoped&gt; .example { color: red; } &lt;/style&gt; &lt;template&gt; &lt;div class=&...
  • 在我的项目中使用了vue-awesome-swiper ,在修改css样式的时候,刚开始时在组件中在写了个style 标签,没有写scoped,样式修改成功,但是打包之后该样式失效 解决办法 在src下创建一个文件夹,在里面创建一个css文件...
  • vue 添加旋转图片 修改css transform 值

    千次阅读 2018-12-21 15:55:00
    import BigImg from '@/components/bigImg_rotate/index.vue';  export default {  components: {  'big-imgrotate': BigImg  },  data() {  return {  showImg:false  }  },  methods: {  //...
  • 在配置autoprefixer时,按照之前的配置可以成功补全css浏览器前缀,但是结合postcss-pxtorem插件,px可以成功转换为rem,但css前缀无效。 经过几个小时的鼓捣,终于让我发现了蛛丝马迹。哈哈哈,很开心,好激动!!...
  • 引入css文件: 报错信息: 问题: 解决办法:打开./src/assets/css/style.css找到../../Assets/fonts/StandardCT-BoldCond.otf,将路径修改正确

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,799
精华内容 24,319
关键字:

vue修改css

vue 订阅