vue在scss中使用j变量值

阅读数:198 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、在scss中使用js变量值(使用v-bind双向绑定)

<template>
	<div class="content" :style="{'--color': themeColor}">
		<div class="title">这是一个标题</div>
	</div>
	<button @click="themeColor='pink'">修改颜色</button>
</template>

<script>
	export default {
		name: 'DEMO',
		data() {
			return {
				themeColor: 'red'
			}
		},
	}
</script>

<style lang="scss">
	.content {
		// --color 在content及其子元素都可以使用
		width: 100%;
		height: 200px;
		background-color: var(--color);

		.title {
			background-color: white;
			color: var(--color);
		}
	}
</style>

二、变量在style标签定义,在js进行修改

<template>
	<div class="content" ref="content">
		<div class="title">这是一个标题</div>
	</div>
	<button @click="changeBgColor">修改背景颜色</button>
	<button @click="changeFontColor">修改字体颜色</button>
</template>

<script>
	export default {
		name: 'DEMO',
		data() {},
		methods: {
			changeBgColor() {
				document.getElementsByTagName('body')[0].style.setProperty('--bg-color', 'pink');
			},
			changeFontColor() {
				// --font-color 在哪个元素定义的就在哪个元素修改
				this.$refs.content.style.setProperty("--font-color", 'pink');
			}
		},
	}
</script>

<style lang="scss">
	// --label-font-color:为js操作此变量需要用到的KEY
	// --red:默认css属性值
	$themeBgColor: var(--bg-color, red);

	.content {
		--font-color: red;
		width: 100%;
		height: 200px;
		background-color: $themeBgColor;

		.title {
			background-color: white;
			color: var(--font-color);
		}
	}
</style>

三、vue3可以直接使用v-bind绑定

<template>
	<div class="content" ref="content">
		<div class="title">这是一个标题</div>
	</div>
	<button @click="changeBgColor">修改背景颜色</button>
</template>

<script>
	export default {
		name: 'DEMO',
		data() {
			return {
				themeColor: 'red'
			}
		},
		methods: {
			changeBgColor() {
				this.themeColor = 'pink';
			},
		}	
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 200px;
		background-color: v-bind('themeColor');
	}
</style>

注意在SCSS中,无法直接访问在defineProps中定义的js变量,这是因为scss是在构建时编译的,而defineProps是在运行时进行的,这时可以使用内联样式:style

<template>
  <div 
    :style="{
      backgroundImage: isHovered ? 'url(' + hoverImageUrl + ')' : 'url(' + defaultImageUrl + ')'
    }"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
  >
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultImageUrl: 'path/to/default-image.jpg',
      hoverImageUrl: 'path/to/hover-image.jpg',
      isHovered: false
    };
  },
  methods: {
    handleMouseOver() {
      this.isHovered = true;
    },
    handleMouseOut() {
      this.isHovered = false;
    }
  }
};
</script>

 




相关推荐

在使用Vue中经常看到HTML中有标签属性前面添加了“:”,有些没有。 其实是v-bind的缩写。 v-bind 缩写: ‘:’ 用法:动态绑定一个或多个特性,或一个组件prop到表达式。在绑定cl

一、生命周期 1、vue2生命周期 beforeCreate #实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用 created #实例创建完成后被立即同步调用 beforeMount #

一、使用pnpm新建项目 可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安

一、概述 <script setup> 是在单文件组件(SFC)中使用组合式API的编译时语法糖,解决Vue3.0中setup需要频繁将声明的变量、函数以及import引入的内容通过return向外

一、概述 在vue2中,data函数里返回的值直接为响应式,但在vue3中我们需要使用一些函数才能达到这个效果。 setup函数中拿不到vue的this。 二、常用函数 <template> <d

<script> export default { setup() { const func1= () => { console.log("func1");

缓存页面主要Jul为了防止重复渲染dom,减少加载时间及性能消耗,提高用户体验。 一、旧版的语法 <keep-alive> <router-view v-if="$route.meta.kee

一、在main.js挂载 import { createApp } from 'vue' import App from './App.vue' import router from './route

一、概述 在vue3中没有$refs这个对象,可以使用如下方法 <template> <div><input type="text" ref="txt1" value="hello" /></div>

方式一、全局引入 全局引入element之后事,element已经在app.config.globalProperties添加了全局方法$message,所以可以在组件中直接使用。 方式二、按需引入