1. 首页
  2. 分类
  3. javascript
Vue3在css中使用v-bind绑定js/ts变量，也可以在scss和less中使用方式
System
2024-08-07
所有,javascript

在Vue 3中，可以使用v-bind指令在CSS中绑定JavaScript或TypeScript变量。这通常通过CSS-in-JS库或Vue单文件组件（SFC）的<style>标签内部进行。

使用内联样式

在模板中使用v-bind绑定变量到样式：




<template>
  <div :style="{ color: dynamicColor }">这是动态颜色的文本</div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const dynamicColor = ref('red')
</script>

使用CSS-in-JS库

如果你使用的是如styled-components这样的CSS-in-JS库，可以这样绑定：




const dynamicColor = 'red';
const StyledDiv = styled.div`
  color: ${dynamicColor};
`;

使用SFC <style>标签

在Vue单文件组件中，可以使用<style>标签的scoped属性来为组件定义局部样式，并使用Vue提供的$style对象来访问样式。




<template>
  <div :class="$style.redText">这是动态颜色的文本</div>
</template>
 
<script setup>
// 不需要导入其他内容，可以直接使用
</script>
 
<style scoped>
.redText {
  color: red;
}
</style>

对于SCSS或LESS，你需要在构建工具链中安装相应的预处理器，并在<style>标签中指定语言类型：




<style lang="scss">
$dynamicColor: red;
 
div {
  color: $dynamicColor;
}
</style>

请注意，在SCSS或LESS中直接使用JavaScript变量是不支持的，因为它们是预处理语言。你需要通过构建工具或Webpack加载器来实现这一点，例如使用sass-loader和less-loader，并在配置中使用additionalData选项来传递JavaScript变量。

- 阅读更多 -
js - - - - - 如何给自己的网站添加中英文切换（多语言也可）
System
2024-08-07
所有,javascript

要在网站上添加中英文切换功能，可以使用JavaScript来更改页面内容。以下是一个简单的实现方法：

  1. 为每种语言准备相应的语言文件，例如en.json和cn.json。
  2. 使用JavaScript加载语言文件，并根据用户选择更改页面内容。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-Language Website</title>
    <script>
        // 当页面加载完成后执行
        window.onload = function() {
            // 获取按钮元素
            var langEn = document.getElementById('lang-en');
            var langCn = document.getElementById('lang-cn');
            var content = document.getElementById('content');
 
            // 加载语言文件
            function loadLanguage(lang) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var messages = JSON.parse(xhr.responseText);
                        content.innerHTML = messages.message;
                    }
                };
                xhr.open("GET", lang + ".json", true);
                xhr.send();
            }
 
            // 设置英文
            langEn.onclick = function() {
                loadLanguage('en');
            };
 
            // 设置中文
            langCn.onclick = function() {
                loadLanguage('cn');
            };
 
            // 默认加载中文
            loadLanguage('cn');
        };
    </script>
</head>
<body>
    <div id="content"></div>
    <button id="lang-en">English</button>
    <button id="lang-cn">中文</button>
</body>
</html>

en.json:




{
    "message": "Hello, this is an English page!"
}

cn.json:




{
    "message": "你好，这是一个中文页面!"
}

用户点击按钮时，页面会加载对应语言的JSON文件，并更新内容区域。这个例子只是基础实现，可以根据需要进行扩展，比如使用URL参数、localStorage或cookie来记住用户的语言选择，或者添加更多语言。

- 阅读更多 -
10分钟上手nest.js+mongoDB
System
2024-08-07
所有,javascript



// 安装Nest.js和MongoDB相关依赖
// npm install @nestjs/core @nestjs/mongoose mongoose
 
// app.module.ts
import { Module } from '@nestjs/core';
import { MongooseModule } from '@nestjs/mongoose';
import { AppController } from './app.controller';
 
@Module({
  imports: [
    MongooseModule.forRoot('mongodb://localhost:27017/nest-test', {
      useNewUrlParser: true,
      useFindAndModify: false,
    }),
  ],
  controllers: [AppController],
})
export class ApplicationModule {}
 
// app.controller.ts
import { Controller } from '@nestjs/common';
import { MongooseModule } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { Cat } from './interfaces/cat.interface';
 
@Controller()
export class AppController {
  constructor(private readonly catModel: Model<Cat>) {}
 
  async create(name: string): Promise<Cat> {
    const createdCat = new this.catModel({ name });
    return await createdCat.save();
  }
 
  async findAll(): Promise<Cat[]> {
    return await this.catModel.find().exec();
  }
}
 
// cat.schema.ts
import { Schema } from 'mongoose';
 
export const CatSchema = new Schema({
  name: String,
  age: Number,
});
 
// main.ts
import { NestFactory } from '@nestjs/core';
import { ApplicationModule } from './app.module';
 
async function bootstrap() {
  const app = await NestFactory.create(ApplicationModule);
  await app.listen(3000);
}
bootstrap();

这个示例展示了如何使用Nest.js框架和MongoDB数据库。在app.module.ts中，我们配置了MongooseModule来连接到本地的MongoDB实例。在app.controller.ts中，我们定义了一个控制器，它使用Mongoose的Model来创建和查询数据。最后，在main.ts中，我们启动了Nest.js应用程序。这个例子简单地展示了如何开始使用Nest.js进行开发，并且提供了一个基本的数据库交互。

- 阅读更多 -
JS 计算两个时间之间的间隔（天、时、分、秒），2024年最新web开发学习
System
2024-08-07
所有,javascript



// 计算两个时间之间的间隔
function getTimeInterval(date1, date2) {
  const oneDay = 24 * 60 * 60 * 1000; // 每天的毫秒数
  const diffTime = Math.abs(date2 - date1); // 计算两个日期时间的差值（绝对值）
  const diffDays = Math.floor(diffTime / oneDay); // 计算差值中的天数部分
  
  // 计算差值中的小时、分钟和秒数
  let leftTime = diffTime - diffDays * oneDay; // 减去天数后的毫秒数
  const hours = Math.floor(leftTime / (60 * 60 * 1000)); // 小时
  leftTime -= hours * 60 * 60 * 1000; // 减去小时数后的毫秒数
  const minutes = Math.floor(leftTime / (60 * 1000)); // 分钟
  leftTime -= minutes * 60 * 1000; // 减去分钟数后的毫秒数
  const seconds = Math.floor(leftTime / 1000); // 秒
 
  return {
    days: diffDays,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  };
}
 
// 示例：计算2023年1月1日和2024年1月2日之间的间隔
const date1 = new Date('2023-01-01T00:00:00Z');
const date2 = new Date('2024-01-02T00:00:00Z');
const interval = getTimeInterval(date1, date2);
 
console.log(interval); // 输出间隔的天、时、分、秒

这段代码定义了一个getTimeInterval函数，它接受两个日期对象作为参数，并返回一个对象，其中包含两个日期之间的间隔天数、小时数、分钟数和秒数。然后通过示例代码展示了如何使用这个函数来计算两个特定日期之间的间隔。

- 阅读更多 -
详细分析Js中的Promise.all基本知识（附Demo）
System
2024-08-07
所有,javascript



// 导入必要的库
const util = require('util');
 
// 定义一个模拟异步操作的函数
function asyncOperation(value, delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof value === 'number') {
        resolve(value * 2);
      } else {
        reject(new Error('Value is not a number'));
      }
    }, delay);
  });
}
 
// 使用Promise.all并发执行多个异步操作
function testPromiseAll() {
  const promises = [
    asyncOperation(200, 100),
    asyncOperation('Hello', 150),
    asyncOperation(500, 200)
  ];
 
  // 使用Promise.all等待所有promises完成
  Promise.all(promises).then(values => {
    console.log('所有promise都已成功解决:', values);
  }).catch(error => {
    console.error('至少一个promise失败:', error);
  });
}
 
// 调用函数执行测试
testPromiseAll();

这段代码首先定义了一个模拟异步操作的函数asyncOperation，它接收一个值和延迟时间，并在指定的延迟后返回一个被乘以2的新值的promise。然后，testPromiseAll函数创建了一个promise数组，并使用Promise.all来并发执行这些异步操作。当所有promise都成功解决时，它会打印出解决的值；如果至少有一个promise失败，它会捕获错误并打印出来。

- 阅读更多 -
Vue3打印插件Print.js的使用
System
2024-08-07
所有,javascript



<template>
  <div>
    <button @click="print">打印</button>
  </div>
</template>
 
<script>
import printJS from 'print-js';
 
export default {
  methods: {
    print() {
      printJS({
        printable: 'my-element-to-print',
        type: 'html',
        scanStyles: false
      });
    }
  }
}
</script>

这个例子中，我们首先导入了print-js插件。在methods中定义了一个名为print的方法，该方法调用printJS函数，并传递了一个包含打印对象和类型的配置对象。这里假设要打印的内容在一个ID为my-element-to-print的元素中。当按钮被点击时，print方法将被触发，并执行打印操作。注意，实际使用时需要确保打印内容的元素在页面上可见，且ID正确对应。

- 阅读更多 -
uniapp使用render.js和Leaflet进行数据通信和地图加载
System
2024-08-06
所有,javascript



// render.js
import L from 'leaflet';
import 'leaflet-echarts';
 
export default {
  props: {
    // 接收外部传递的参数
    mapData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      map: null,
      tileLayer: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = L.map('map', {
        center: [this.mapData.center.lat, this.mapData.center.lng],
        zoom: this.mapData.zoom,
        zoomControl: false,
        attributionControl: false
      });
 
      this.tileLayer = L.tileLayer(this.mapData.url, {
        maxZoom: this.mapData.maxZoom,
        minZoom: this.mapData.minZoom
      }).addTo(this.map);
 
      // 监听地图视图变化事件
      this.map.on('moveend', () => {
        const center = this.map.getCenter();
        this.$emit('update:center', { lat: center.lat, lng: center.lng });
        this.$emit('update:zoom', this.map.getZoom());
      });
    }
  }
};

这段代码定义了一个Vue组件，它在mounted钩子中初始化了Leaflet地图，并设置了地图的中心点、缩放级别以及TileLayer图层。同时，它还监听了地图的moveend事件，当地图的中心点或者缩放级别变化时，通过$emit触发事件来更新父组件中的数据。这样做既保证了地图的交互性，也实现了地图数据与应用状态的同步。

- 阅读更多 -
BigDecimal.js: 高精度浮点数计算库
System
2024-08-06
所有,javascript

BigDecimal.js 是一个用于执行高精度浮点数计算的 JavaScript 库。它可以用来进行加、减、乘、除等算术操作，并保证计算结果的准确性。

以下是使用 BigDecimal.js 进行高精度浮点数计算的一个简单示例：




// 引入 BigDecimal 类
const BigDecimal = require('bigdecimal');
 
// 创建两个高精度浮点数实例
let a = new BigDecimal('3.1415926535');
let b = new BigDecimal('1.23456789');
 
// 执行加法
let sum = a.add(b);
 
// 执行减法
let difference = a.subtract(b);
 
// 执行乘法
let product = a.multiply(b);
 
// 执行除法
let quotient = a.divide(b);
 
// 输出结果
console.log('加法结果:', sum.toString());
console.log('减法结果:', difference.toString());
console.log('乘法结果:', product.toString());
console.log('除法结果:', quotient.toString());

在这个例子中，我们创建了两个 BigDecimal 对象，并对它们进行了加、减、乘、除操作。最后，我们将结果转换为字符串并打印出来。这个库非常适合金融、科学计算等对数值精度要求极高的应用场景。

- 阅读更多 -
vue+cesium+heatmap.js 实现热力图
System
2024-08-06
所有,javascript

要在Vue中结合Cesium和heatmap.js实现热力图，你需要先安装这两个库，然后在Vue组件中初始化它们。以下是一个简单的示例：

  1. 安装Cesium和heatmap.js：



npm install cesium heatmap.js
  1. 在Vue组件中引入并使用：



<template>
  <div id="cesiumContainer"></div>
</template>
 
<script>
import Cesium from 'cesium/Cesium'
import 'heatmap.js/build/heatmap.js'
 
export default {
  name: 'HeatmapOverlay',
  mounted() {
    // 初始化Cesium
    Cesium.Ion.defaultAccessToken = '你的Cesium ion token'
    const viewer = new Cesium.Viewer('cesiumContainer')
 
    // 模拟热力数据点
    const points = [
      { x: -122.4, y: 37.8, value: 10 },
      // ... 更多点
    ]
 
    // 创建heatmap.js实例
    const heatmapInstance = heatmap.create({
      container: viewer.scene.canvas,
      backgroundColor: 'rgba(0,0,0,0)',
      radius: 50
    })
 
    // 更新热力图数据
    heatmapInstance.setData({ data: points, min: 0, max: 100 })
 
    // 监听视图变化更新热力图
    viewer.scene.postRender.addEventListener(() => {
      heatmapInstance.update()
    })
  }
}
</script>
 
<style>
#cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>

在这个例子中，我们首先在mounted钩子中初始化了Cesium视图，并创建了heatmap.js的实例，绑定到了Cesium的canvas上。然后，我们设置了热力图的数据点并指定了最小值和最大值。最后，我们监听了Cesium的postRender事件，以便在每一帧渲染后更新热力图。

请确保你有一个有效的Cesium ion token来允许Cesium加载地图资源，并根据你的实际情况调整热力图的radius和其他配置。

- 阅读更多 -
JavaScript 和 TensorFlow.js 实现前端的猫狗大战！
System
2024-08-06
所有,javascript



// 引入TensorFlow.js
const tf = require('@tensorflow/tfjs-node');
const tfnode = require('@tensorflow/tfjs-node');
const jpeg = require('jpeg-js');
 
// 加载模型和权重
async function loadModel() {
  const model = await tf.loadLayersModel('file:///model.json');
  const weights = await tf.loadWeights('file:///weights.bin');
  model.apply(weights);
  return model;
}
 
// 将图片转换为张量
function decodeImage(imageBuffer) {
  const img = jpeg.decode(imageBuffer);
  const imgData = new Uint8Array(img.data.length);
  for (let i = 0; i < imgData.length; i++) {
    imgData[i] = img.data[i];
  }
  const tensor = tf.node.decodeJpegTensor(imageBuffer);
  const batched = tensor.expandDims(0);
  return batched;
}
 
// 预测图片
async function predict(imageBuffer) {
  const model = await loadModel();
  const tensor = decodeImage(imageBuffer);
  const predictions = model.predict(tensor);
  const score = predictions.dataSync();
  return score[0];
}
 
// 示例：预测一张图片文件
const fs = require('fs');
const imagePath = 'path/to/your/image.jpg';
const imageBuffer = fs.readFileSync(imagePath);
predict(imageBuffer).then(score => {
  console.log('The probability that the image contains a cat is:', score);
});

这段代码展示了如何使用TensorFlow.js在Node.js环境中加载一个已经训练好的模型，并对单张图片进行预测。首先，我们引入了必要的模块，并定义了加载模型和权重的异步函数。然后，我们定义了将图片转换为张量的函数，以便输入到模型中。最后，我们提供了一个异步函数predict来实现图片的预测，并在示例中展示了如何对一张图片文件进行预测。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号