精华内容
下载资源
问答
  • 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做一个项目,刚开始没想到后台用的微擎,不能前后端完全独立。而且 index.html 页面放在template文件夹中,而静态的css和js等文件则放在 /addons/business/static 中,webpack默认打包出来js中的路径则是 /...

    最近用vue做一个项目,刚开始没想到后台用的微擎,不能前后端完全独立。而且 index.html 页面放在template文件夹中,而静态的css和js等文件则放在 /addons/business/static  中,webpack默认打包出来js中的路径则是 /static 。

    打包出来的文件又不能修改,导致项目中调用的静态文件总是404。既然不能改项目中的路径,那就改打包的路径,模拟服务器存储静态文件的路径(/addons/business/static)(business为你模块名)。

    然后就在网上找,找到了修改打包文件储存路径的方法:

    1、找到 config/index.js 文件

    a57c8c7e1e9e7d6244d1e245fdd91c41.png

    2、在 index.js 中 module.exports={} 的 build:{} 中修改 assetsSubDirectory 的值为路径,如:assetsSubDirectory 的默认值是static,而微擎中保存静态文件的路径是 /addonc/business/static ,则把 assetSubDirectory 的值改为 addonc/business/static 。

    bd0b2611a974538e365fcbf07e126945.png

    3、然后 npm run build 打包,得到的文件结构如下图:

    b041370cff1137fdf4535db3172ca856.png

    4、最后把 index.html 放入微擎的 /template/mobile 文件夹中,当然如果是pc端的话放在 /template 里

    5、把上面 static 中的文件放入微擎的 /addonc/business/static  中,这样就完成了模拟路径。

    总结:这方法也就是换个方式模拟路径,对其他程序也可以这样做。大神们有更好的方法欢迎评论把好方法分享给大家。

    展开全文
  • 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解决不了,花费的代价很大,不值得。
    展开全文
  • 修改css不生效 使用 !important也生效时 使用 /deep/ /deep/#qrcode{ width:200px; }

    修改css不生效 使用 !important也不生效时 使用 /deep/

    /deep/#qrcode{

            width:200px;

    }

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

    万次阅读 2018-09-04 10:32:39
    calss语法格式=&amp;amp;amp;gt; :class=”{ ’ a ’ : f }” a表示添加的css样式,f 表执行条件,满足条件就添加写好的Css样式。用于添加Css样式 style语法格式=&...用于修改CSS某一个样式。...
  • 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}}<...
  • 用run dev build打包后,发现样式改变了,最终发现addAdress.vue和myAdress.vue中的有个类名是相同的,但是想着...一.css样式发生改变的scoped属性:1)加了scoped属性的组件,可以维护当前组件样式受其它组件影响...
  • vue中动态修改css样式代码

    万次阅读 2019-09-06 18:43:13
    一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候css代码就不能直接写,需求如下: 解决方案: 先给弹窗写基础样式,定位信息可以不写 toast_tips ...
  • vuecss修改滚动条样式 样式为 /* 滚动条 */ body *::-webkit-scrollbar { width: 10px; height: 10px; } body *::-webkit-scrollbar-track { background: #fff; border-radius: 2px; } body *::-webkit-...
  • 详解webpack打包vue时提取csswebpack打包vue项目的时候默认会把vue里的css打包到页面上。webpack.config.js里的plugins加上以下配置new webpack.LoaderOptionsPlugin({test:/\.vue$/,options: {vue: {loaders: {css:...
  • 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/...
  • Vue修改主题颜色 使用CSS全局变量 用于统一修改主题色 定义: /*Vue写在App.vue的style里*/ :root { --theme-color: pink; } 使用: /*每个位置都可以这样使用,即颜色为pink*/ color: var(--theme-color); ...
  • 归其原因是因为 less、sass 等预处理器已经拥有定义变量的功能,以及Vue、react很方便设置 style 样式,大家可能觉得使用 css 定义变量方便且没必要。实则不然举个最直观的栗子:“如何使用 vue 设置伪类伪元素的...
  • CSS最基础最常用的知识点精简提炼CSS精简提炼 一套连招全带走 字体设置 /*是否斜体,是否加粗,字体大小/字体行高,字体样式(楷体)*/font: italic bold 24px/50px 楷体; 背景设置 background:red url(img_flwr.gif) ...
  • 修改配置文件,build/ webpack.prod.cong.js js 、css文件名称增加时间戳。
  • 我就废话多说了,大家还是直接看代码吧~{{ msg }}export default {data() {return {msg: "Welcome to Your Vue.js App",};},computed: {getClientHeight:function () {//屏幕可视区域的高度let clientHeight = ...
  • vuecss穿透修改方法

    2020-07-10 11:50:33
    当我们使用element或者iview等UI库时往往发现样式很难修改,因此我本人找到了穿透修改css样式的方法。亲测有效;喜勿喷。 第一种:>>>写法 第二种:/deep/写法
  • vue css样式修改穿透

    2020-04-28 14:47:07
    修改组件样式的时候可能没有效果 加个>>>样式穿透可能会好一些
  • 我就废话多说了,大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} [removed] export default { data() { return { msg: Welcome to Your Vue.js App, }; }, ...
  • 想要动态修改css样式就得能动态的给<style></style>赋值,可是<style></style>里面又写了变量(有可能可以但是我不会。。),所以想了个这种办法,通过给模板文件的:style动态复制从而...
  • 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式本人系前端小白,如有不对的地方轻喷,只是写自己总结下来的一些简单应用。 1.路由跳转的两种基本方式 2.动态修改class名 如果有不对的地方还请各位大牛指出。
  • 废话多说直接看代码 height 为动态传入的值(通过data获取) 例子1: 当我们动态修改的值为正数的时候 <view :style="[{ 'margin-top':height + 'px'}]"> 将盒子向下移动 </view> 例子2 当我们...
  • vue设置全局css

    千次阅读 2019-12-23 17:12:24
    vue设置全局css只要在main.js里引入css文件即可,如: import '@/styles/index.scss' // 全局css
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个v-bing:class="{...
  • <li ref="borderBottom"> <a href="javascript:;">我的资料</a> </li> <li ref="borderBottom1">|</li> <li ref="borderBottom2"> <a href="javascript:;......
  • vue 规范:CSS 样式

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,193
精华内容 27,677
关键字:

vue能不能改css

vue 订阅