精华内容
下载资源
问答
  • 使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;接下来通过本文给大家分享Vue.js中对css操作(修改)具体方式,感兴趣的朋友跟随小编一起看看吧
  • 我就废话不多说了,大家还是直接看代码吧~ <!--此div的高度取屏幕可视区域的高度--> <h5>{{ msg }} ... msg: Welcome to Your Vue.js App, }; }, computed: { getClientHeight:function () { /
  • vuecss样式管理

    万次阅读 2019-02-21 17:44:45
    1. Vue中scoped属性的渲染规则: 给DOM节点添加一个不重复的data属性(比如data-v-7ba5bd90)来表示他的唯一性 在每个CSS选择器末尾(编译后生成的CSS)加一个当前组件的data属性选择器(如[data-v-7ba5bd90])来...

    1. Vue中scoped属性的渲染规则:

    1. 给DOM节点添加一个不重复的data属性(比如data-v-7ba5bd90)来表示他的唯一性
    2. 在每个CSS选择器末尾(编译后生成的CSS)加一个当前组件的data属性选择器(如[data-v-7ba5bd90])来私有化样式。选择器末尾的data属性和其对应的DOM中的data属性相匹配
    3. 子组件最外层标签上有一个类已经在这个父组件中定义过了,那么这个父组件的样式就也会应用到子组件上。只不过其权重没有子组件同类名的重。
    4. 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性
    5. 如果父组件想要改变子组件中某个标签样式可以使用>>>连接符或者/deep/来解决
    <!-- Button.vue -->
       <template> 
         <button class="btn"> 
            <span> <slot></slot> </span>
         </button>
       </template>
        <style scoped> 
            .btn { color: red; }
         </style>
    <!-- App.vue -->
    <template>
    	<div id="app">
    		<Button class="btn-lg">click</Button> </div>
    </template>
    <script>
    	import Button from "./components/Button";
    	export default {
    		name: "App",
    		components: {
    			Button
    		}
    	};
    </script>
    <style scoped>
    	.btn>>> span {
    		color: green;
    		font-weight: bold;
    		border: 1px solid green;
    		padding: 10px;
    	}
    </style>
    
    1. 子组件(‘button class=“btn”’) v-html中内在的标签样式不生效,原理以及解决方案同4、5

    其实上述中父组件想要修改子组件的样式,在开发中其实是经常遇到的,就我个人开发项目过程中就会遇到在使用element-ui时,对element-ui封装的组件样式并不是很满意,想要修改,我用到的是个比较笨的方法,

    <style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
    	//这里可以写该父组件的样式,以及子组件最外层元素样式
    </style>
    <style lang="scss" type="text/scss" rel="stylesheet/scss">
    	//这里可以写子组件中的样式,但是一定要父组件的唯一标识,表明这个样式只是在特定父组件下的这个组件内部的样式才有变化
    	#父组件id{
    		.子组件样式{
    			.子组件标题样式
    		}
    	}
    </style>
    

    但是不论上面的使用>>>连接符或者/deep/来解决,还是我的笨方法其实都破坏了已封装好的组件中的样式,但这也失去了组件封装的效果。再次回到以前CSS中令人头痛的问题:CSS作用域。

    2. Vue中使用CSS Modules:

    这里只是简单说一下,因为还没有使用过CSS Modules接触scope较多,再者个人觉得CSS Modules的使用太过繁琐,而且scope就够解决Css样式管理了,以上只是个人的一点见解,如果下面有不对的地方请多指教!
    1. 基本使用方式

    在style标签中添加module属性,表示打开CSS-loader的模块模式

    <style module> 
    	.btn {
    		 color: red;
    	 }
    </style>
    

    在模板中使用动态类绑定:class,并在类名前面加上’$style.’

    <template> <button :class="$style.btn">{{msg}}</button> </template>
    

    效果如下所示::class="$style.btn"会被编译成为.Button_btn_3ykLd这个类名,并且样式的选择器也自动发生了相应的变化。
    在这里插入图片描述
    需要注意的点:

    • 如果类名包含中划线,或者类名是驼峰式命名,则使用中括号语法
    	<h4 :class="$style['header-tit']">类别推荐</h4>
    
    • 也可以使用数组或对象语法
    	<p :class="{ [$style.red]: isRed }">
          Am I red?
        </p>
        <p :class="[$style.red, $style.bold]">
          Red and bold
        </p>
    
    • 更复杂的对象语法
    	<ul 
        :class="{
            [$style.panelBox]:true,
            [$style.transitionByPanelBox]:needTransition
          }">
        </ul>
    

    相当不好用啊,scss不能用,二层嵌套样式也不能选择生效,

    <template>
    	<div class="warp">
    		<div :class="$style['aa']">
    			123
    			<div :class="$style['bb']">
    				ffff
    			</div>
    		</div>
    		<div :class="$style['bb']">
    			ddddddd
    		</div>
    	</div>
    	
    </template>
    
    <script>
    </script>
    //错误示例
    <style module  lang="scss">
    	.aa{
    		background-color: #00B43C;
    		.bb{
    			border: 1px solid #66512C;
    		}
    	}
    	/*.aa*/ 
    </style>
    正确示例:
    <style module>
    	.aa{
    		background-color: #00B43C;
    	}
    	.aa .bb{
    		border: 1px solid #66512C;
    	}
    </style>
    

    2.子组件调用父组件样式

    <!-- Button.vue -->
    <template> <button :class="[$style.btn, primaryClass]">{{msg}}</button> </template>
    <script>
    	export default {
    		name: 'Button',
    		props: {
    			msg: String,
    			primaryClass: ''
    		}
    	}
    </script>
    <style module>
    	.btn {
    		border: 1px solid #ccc;
    		border-radius: 3px;
    		padding: 5px 15px;
    		background: #fefefe;
    		margin: 5px;
    	}
    </style>
    <!-- App.vue -->
    <template>
    	<div id="app">
    		<Button msg="Default Button" />
    		<Button :class="{[$style['btn-lg']]: isLg}" msg="Larger Button" />
    		<Button :class="{[$style['btn-sm']]: isSm}" msg="Smaller Button" />
    		<Button msg="Primary Button" :primaryClass="$style['btn-primary']" /> </div>
    </template>
    <script>
    	import Button from './components/Button'
    	export default {
    		name: 'app',
    		components: {
    			Button
    		},
    		data() {
    			return {
    				isLg: true,
    				isSm: false
    			}
    		}
    	}
    </script>
    <style module>
    	.btn-lg {
    		padding: 15px 30px;
    	}
    	
    	.btn-sm {
    		padding: 5px;
    	}
    	
    	.btn-primary {
    		background: rgb(54, 152, 244);
    		border-color: rgb(32, 108, 221);
    		color: #fff;
    	}
    </style>
    

    效果图如下所示:
    在这里插入图片描述
    (虽然上面的方法可以实现子组件调用父组件的样式,但是我还是想吐槽,子组件的样式不就应该写在子组件的样式里吗?这样写不是扰乱了组件样式封装的原本意图了吗?r如果真的想要修改子组件的样式,就像上诉遇到的vue项目中element-ui封装的组件样式并不是很满意,想要修改也不能往element-ui封装的组件里传入一个props来修改样式吧???)
    3.配置
    官方配置:

    // webpack.config.js
    {
      module: {
        rules: [
          // ... 其它规则省略
          {
            test: /\.css$/,
            use: [
              'vue-style-loader',
              {
                loader: 'css-loader',
                options: {
                  // 开启 CSS Modules
                  modules: true,
                  // 自定义生成的类名
                  localIdentName: '[local]_[hash:base64:8]'
                }
              }
            ]
          }
        ]
      }
    }
    

    还有一种方式:在vue.config.js中添加如下配置

    css: {
     loaderOptions: {
      css: {
      localIdentName: '[name]__[local]-[hash:base64:5]',
      camelCase: true
      }
     }
     }
    //localIdentName是格式化类名:name是当前文件名称,local是当前定义的类名名,hash是hash生成的字符串,长度为5
    //camelCase:在类名有中横线时,'only'在标签上绑定类名时只支持大驼峰,true:支持大驼峰也支持中括号命名
    

    反正两种方式我都没有成功,求大神指教!出来的样式都是这样
    在这里插入图片描述

    总结:

    就目前情况可能更适合用scope来实现css样式的局域化管理。通过项目功能的越来越多,由于前期没有一个很好的css样式规划管理,经常删除没用组件页面时需要调整整个项目样式,这就是因为css样式没有局域化的后果。维护起来找不到导致现在标签样式变化的CSS文件等等,综上以下是开发时要注意的点。

    1. css一定要有标识:方便样式修改查找。

    在这里插入图片描述在这里插入图片描述
    2. 使用scope区域化Css样式
    3. 想要修改子组件封装好的样式,一定要在外层写清楚哪个父组件下的子组件的样式,以免修改全局的样式

    <style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
       //这里可以写该父组件的样式,以及子组件最外层元素样式
    </style>
    <style lang="scss" type="text/scss" rel="stylesheet/scss">
       //这里可以写子组件中的样式,但是一定要父组件的唯一标识,表明这个样式只是在特定父组件下的这个组件内部的样式才有变化
       #父组件id{
       	.子组件样式{
       		.子组件标题样式
       	}
       }
    </style>
    
    展开全文
  • Vue.js中对css操作(修改)具体详解:

    万次阅读 多人点赞 2018-07-23 11:04:14
    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改; 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的值在vue的官方文档里被称为'指令预期...

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;

    1.v-bind:class || v-bind:style

    其中v-bind是指令,: 后面的class 和style是参数,而class之后的值在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:class的'指令预期值'除了字符串以外还可以是对象或者数组(‘v-bind:’中的v-bind可省略)。

    1.1:对象语法:

    通过对象来绑定v-bind:class=“{'css类名':控制是否显示(true or false)}”

    <template>
    	<div>
    		<div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的对象更改&&绑定test</span></div>
    	</div>
    </template>
    <script>
    	export default {
    		name: 'mytest',
    		data() {
    			return {
    				display: true
    			}
    		},
    		mounted() {},
    		computed: {},
    		methods:{}
    	}
    </script>
    
    <style>
    	.colordisplay {
    		display: inline;
    		background: red;
    		border: 1px solid blue
    	}
    </style>

    如果display为true,那么此时该部分的class就是 class="mycolor colordisplay",通过设置display的值就可以控制colordisplay的显示

    如果要设置绑定多个class的话就和正常的对象键值对一样中间用逗号隔开就可以了v-bind:class="{'colordisplay':display,'ispay':pay}"

    1.2:内联样式:

    v-bind:style='mycolor'

    template

    <div :style='mypagestyle'><span>1.2我的样式内联更改&&绑定test</span></div>

    data

    mypagestyle:{color: 'yellow',background:"blue"},

    1.3:数组语法:

    也可以通过数组来绑定v-bind:style='[mycolor1,mycolor2]'

    <div :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></div>

     然后设置返回的数据为

    myarr:{color: 'white'},
    myarrtest:{background:'#000',display:'inline'},

    2.计算属性

    也可以通过计算属性计算(适用于较为复杂判断)样式

    <div class='computed' :class='compuretu'>2.计算属性判断</div>

    将计算属性的返回值作为类名,通过判断serd和slid的值来控制样式的显示与否

        data() {
    			return {serd:true,slid:true}
        }, 
    	computed: {
    			compuretu: function() {
    				return {compuretu: this.serd && this.slid}
    			}
    	}

    设置样式 

    .compuretu{color:white;background: red}

    3.操作节点

    由于vue本身是虚拟dom如果通过document来进行节点样式更改的时候有可能会出现'style' is not definde的错误,

    这个问题的解决方式就必须得对vue 的理解要求更高一层了,它可以通过在vue本身的周期mounted函数里用ref和$refs 来获取样式,来完成对其样式的更改:示例如下:

    <template>
    
    <div>
    
    <div style=“color: green;” ref="abc"><span>我的test</span></div>
    
    </div>
    
    </template>
    
    <script>
    
    export default {
    
    name: 'mytest',
    
    data() {
    
    return {}
    
    },
    
    mounted() {console.log(this.$refs.abc.style.cssText)}
    
    }
    
    <script>
    
    <style>
    
    </style>

    说明:

    1.ref被用来给元素(子组件)注册引用信息;

    2.vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素);

    使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取

    上述会将style的内容全部输出(color: green;)

    这样的话对其进行更改就可以对相应的属性直接更改(this.$refs.abc.style.color=red)

    <template>
    	<div>
    		<div :class='{mycss}'><span>我的单个class属性的test</span></div>
    		<div class='mycolor' :class="{'colordisplay':display}"><span>1.1我的对象更改&&绑定test</span></div>
    		<div :style='mypagestyle'><span>1.3我的样式内联更改&&绑定test</span></div>
    		<div :style="[myarr,myarrtest]"><span>1.3我的数组更改&&绑定test</span></div>
    		<div class='computed' :class='compuretu'>2.计算属性判断</div>
    		<div style="color: green;" ref="abc"><span>3.我的dom更改test</span></div>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: 'mytest',
    		data() {
    			return {
    				serd:true,
    				slid:true,
    				mycss: {
    					color: ''
    				},
    				mypagestyle:{
    					color: 'yellow',
    					background:"blue"
    				},
    				myarr:{
    					color: 'white'
    				},
    				myarrtest:{
    					background:'#000',
    					display:'inline'
    				},
    				display: true
    			}
    		},
    		mounted() {  
    			console.log(this.$refs.abc.style.cssText)
    			this.$refs.abc.style.color = 'red' //修改属性
    			this.$refs.abc.style.background = 'black' //新增属性
    			this.$refs.abc.style.display = 'inline' 
    			console.log(111) 
    			console.log(this.$refs.abc.style.display) 
    		},
    		computed: {
    			compuretu: function() {
    				return {
    					compuretu: this.serd && this.slid
    				}
    			}
    		},
    		methods:{
    			
    		}
    
    	}
    </script>
    
    <style>
    	.mycss {
    		color: blue
    	}
    	
    	.colordisplay {
    		display: inline;
    		background: red;
    		border: 1px solid blue
    	}
    	
    	.mycolor {
    		color: orange
    	}
    	
    	.computed {
    		border: 1px solid yellow
    	}
    	.compuretu{
    		color:white;
    		background: red;
    	}
    </style>

    当然最后这种方式对于初入门的朋友来讲可能会有点理解不透,所以我更建议大家使用前几种方式

    种方式。

     

     

    欢迎大家评论指正

    展开全文
  • 1.首先在目录“src/assets”下新建两个文件:“base.css”(基本样式)和“config.css”(颜色变量存放位置,方便随时修改主题色)。 2.config.css文件中,定义变量如: /*主题色*/ $themeColor:#45b795; $...

    1.首先在目录“src/assets”下新建两个文件:“base.css”(基本样式)和“config.css”(颜色变量存放位置,方便随时修改主题色)。

    2.config.css文件中,定义变量如:

    /*主题色*/
    $themeColor:#45b795;
    $borderColor: #EEE;
    // 背景色
    $bgColor:#FAFAFAFA;
    // 按钮
    $btn-red:#ef5728;

    3.base.css(基本样式),引入如下:

    @import "./config.css";
    html,body{width:100%;height:100%;}
    body {font-size:.3rem;background-color: $bgColor;}
    a{text-decoration: none;}
    #app {-webkit-font-smoothing: antialiased;}
    .box{display: flex;position:relative;}
    .box-f1{flex: 1;}
    .box-ac{align-items: center}
    .box-jc{justify-content: center}
    .box-ver{flex-direction: column}
    .w-p100{width:100%;}
    .h-p100{height:100%}
    .hide{display: none !important;}

    核心代码:“background:$bgColor;”。

    4.最后只需要在app.vue中引入一次“base.css”文件就可以了,如:

    <template>
      <div id="app">
        <router-view class="router-view"></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      mounted () {
      }
    }
    </script>
    
    <style lang="scss">
    @import './assets/config.css';
    </style>
    

     

    展开全文
  • //使用动画库animate.css //其中duration是绑定动画的时间 统一设置进入与出去的时间 这里是动画的内容 //也可以这样使用 <transition enter-active-class='bounceIn' leave-active-class='bounceOu
  • 1.原生js操作dom const dom = getElementById(‘box') 2.vue官方方法:ref vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到 ...CSS还要吗? 那我把代码全粘过来你们自己看吧 <te
  • 主要介绍了vue学习笔记之Vuecss动画原理,结合简单实例形式分析了Vuecss样式变换动画效果实现原理与相关操作技巧,需要的朋友可以参考下
  • Vue中怎么使用css样式

    千次阅读 2020-03-21 18:14:35
    一、 使用class样式 1. 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 2.数组中使用三元表达式 <h1 :class="['red', 'thin', isactive?'active':'']">...h1 :class="['red',...

    一、 使用class样式

    1. 数组

    <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
    

    2.数组中使用三元表达式

    <h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
    

    3.数组中嵌套对象

    <h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
    

    4.直接使用对象

    <h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
    

    二、使用内联样式

    1. 直接在元素上通过 :style 的形式,书写样式对象

    <h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
    

    2. 将样式对象,定义到 data 中,并直接引用到 :style

    • 在data上定义样式:
    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
    }
    
    • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
    <h1 :style="h1StyleObj">这是一个善良的H1</h1>
    

    3. 在 :style 中通过数组,引用多个 data 上的样式对象

    • 在data上定义样式:
    data: {
            h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
            h1StyleObj2: { fontStyle: 'italic' }
    }
    
    • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
    <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
    
    展开全文
  • 为什么 Vue3 选择了 CSS 变量 Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量」 ... Vue 3 做了哪些操作,让 SFC (单文件组件)能更好的使用 CSS 变量 以下对这些问题进行探讨 CSS 变量基础 CS.
  • <div class="tree-view-item"> <span class="tree-view-left">{{ item.title }}</span> <div class="tree-view-right"> <...-- @click.stop="onHandleEditBranchOffic
  • vue会在是党的时机触发css过渡或者动画,你也可以提供相应的javascript钩子函数在过渡过程中执行自定义的DOM操作。 每个过渡效果,都需要在目标元素上使用transition特性。 ”show” transition=”my-style”>显示...
  • vue.js 组件cssNote: this tutorial uses Vue.js Single File Components 注意:本教程使用Vue.js单个文件组件 The simplest option to add CSS to a Vue.js component is to use the style ... 将CSS添加到Vue.js...
  • 安装postcss-loader 和 autoprefixer 下载: cnpm install postcss-loader autoprefixer –save-dev 在webpack.config.js里面设置以下代码 test:/\.css$/, use: ['style-loader','css-loader',{ loader: "post...
  • 首先 css,美化checkbox样式,这一段代码拿过去可以直接用 label { font-size: 25px; cursor: pointer; position: absolute; top: -10px; right: 0px; z-index: 150; } label i { font-size: 15px; font-...
  • 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules。那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末。本文将从 什么是CSS Modules、 CSS Modules诞生的原因、 怎样使用...
  • Vue新特性:CSS 中使用 JS 变量

    千次阅读 2020-08-24 08:00:00
    作者:手撕红黑树https://segmentfault.com/a/1190000023479851前言以前在翻译《Vue 3:2020年中状态更新》的时候,文中曾经提到过尤雨溪希望...
  • Vue3 新特性如何在CSS中使用JS变量 前言 最近在 github 上发现一个Vue3非常好玩的特性,这个特性我以前就经常这么想:要是我在 data 里面定义的变量也能在 CSS 里面用那该多好啊!(大家有没有也这么想过) 幻想 以前...
  • vue[css换肤功能的多种实现方式]

    千次阅读 2020-01-16 15:20:22
    vue中换肤功能有着好几种实现方式,如下: 利用class 命名空间,同时命名多套主题如:black-theme、light-theme等,按需加载主题类名(简单 - 常用) 准备多套CSS样式,利用link标签的ref切换(简单 - 按需加载主题...
  • 1.如图 2.实现 中 data中actived一开始为false 方法中 gbys () { this.ddh = JSON.parse(window.localStorage.getItem(‘ddh’)) console.log(this.yhid) console.log(this.fxid) ...position
  • 你是否遇到过vue项目在本地运行没问题,但是打包放到Tomcat之后页面无法显示,控制台报错,提示css,js等路径找不到的情况呢?反正我上次遇到了,所以这里做个笔记吧~~~ 直奔重点~~~解决办法如下: 这样操作后...
  • 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class=...
  • vue css点击旋转 Vue微调器CSS加载器...Amazing collection of pure CSS vue spinners components of css spinners for ajax or loading animation based on loading.io. CSS旋转器的纯CSS vue旋转器组件的惊人集合...
  • 在打包自己vue组建时,遇到一个问题,项目内的css文件无法单独打包出去。看到其他人的项目,都是install之后,可以引入一下js,引入一个css文件,就可以使用了。这块自己也研究了一下,如何vue组件项目中样式单独...
  • 为什么在vue中写的css都没法生效

    千次阅读 2019-09-09 14:42:31
    为了确保css不被全局污染,...vue中的scoped属性的效果主要通过PostCSS转译实现;如: 转译前: <template> <div class="example">hi</div> </template> <style scoped> .exampl...
  • 实际项目中我们获取选择的数据的id;这时候 需要配合使用v-bind,才能获取到选择的那条数据的id值,其实就是id赋值给value属性 <select v-model=select > (a,index) key=index value=a.id>{{ a.name }} ...
  • 解决办法:1、在webpack.prod.conf.js文件里output里面添加:publicPath:'./'2、在utils.js文件里添加 publicPath:'../../'3、在config/index.js文件里,添加assetsPublicPath:'./'css样式表文件这样写这样就可以...
  • vue中提供 @touchmove.prevent 方法可以完美解决这个问题 ”dialog”> 如果不是使用Vue的话,可以给body添加overflow:hidden属性解决 补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还...

空空如也

空空如也

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

vue操作css

vue 订阅