Vue 笔记

本文记录 Vue.js 开发中常见的几个实用技巧，包括通过 JS 动态设置 CSS 变量、理解 extends 与 mixins 的区别以及图片资源的动态导入方法，适合日常开发快速参考。

js动态设置css

this.$el.style.setProperty('--ar-round', this.radius);
// 或者原生设置
// document.documentElement.style.setProperty('--ar-round', this.radius);

// 使用
border-radius: var(--ar-round)

extends 和 mixins 的区别

都是混入对象，但mixins是多继承，extends是单继承；可继承所有属性对象，并且后面覆盖前面

img动态设置地址

import test from "../asssets/test.png"
// test 即为资源地址
console.log(test)
<img :src="test">