当前位置： 首页 > news >正文

制作app定制开发公司/seo文章

news 文章来源：https://blog.csdn.net/WwLK123/article/details/132418252 2025/3/10 5:28:01
制作app定制开发公司,seo文章,网站建设通讯设备中企动力,千元低价网站建设1、样式代码准备 样式提前准备 <style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg, yellow, pink, orange, yellow);}.sad{border: 4px …

1、样式代码准备

样式提前准备

<style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg, yellow, pink, orange, yellow);}.sad{border: 4px dashed rgb(1, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.nobug1{background-color: yellowgreen;}.nobug2{font-size: 30px;text-shadow: 2px 2px 10px red;}.nobug3{border-radius: 5px;}</style>

2、绑定class样式

绑定class样式——字符串写法

适用于：样式的类名不确定，需要动态指定

html：

<!--    绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态指定--><div class="basic" :class="mood" @click="changeMood">{{label}}</div>

js：

mood: 'normal',
methods:{changeMood(){const arr = ['normal', 'happy', 'sad'];// Math.random()产生的数值介于 0,1之间，可以等于0，但是不会等于1；let index = Math.floor(Math.random() * 3);this.mood = arr[index];}}

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HIpwm7wQ-1692628922705)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223709550.png)]

绑定class样式——数组写法

适用于：要绑定的样式个数不确定，名字也不确定

html:

<div class="basic" :class="classArr">{{label}}</div>

js

classArr: ['nobug1', 'nobug2', 'nobug3'],

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tyjmmP0x-1692628922706)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223810320.png)]

绑定class样式——对象写法

适用于：要绑定的样式个数确定，名字也确定，但需要动态决定用不用

html

<div class="basic" :class="classObj">{{label}}</div>

js

classObj: {nobug1: false,nobug2: true,},

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQP4KxNx-1692628922707)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223856205.png)]

3、绑定style样式

绑定style样式——对象写法

html

<!--    绑定style样式——对象写法--><div class="basic" :style="styleObj">{{label}}</div>

js

styleObj:{fontSize: '40px',},

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aRclFNG7-1692628922707)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223438445.png)]

绑定style样式——数组写法

html

<!--    绑定style样式——数组写法--><div class="basic" :style="styleArr">{{label}}</div>

js

styleArr: [{fontSize: '40px',},{color: 'red'}]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-odwStcDR-1692628922708)(C:\Users\wangliukun\AppData\Roaming\Typora\typora-user-images\image-20230821223529233.png)]

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../js/vue.js"></script><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg, yellow, pink, orange, yellow);}.sad{border: 4px dashed rgb(1, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.nobug1{background-color: yellowgreen;}.nobug2{font-size: 30px;text-shadow: 2px 2px 10px red;}.nobug3{border-radius: 5px;}</style>
</head>
<body>
<div id="root"><!--    绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态指定--><div class="basic" :class="mood" @click="changeMood">{{label}}</div><br/><br/><!--    绑定class样式——数组写法，适用于：要绑定的样式个数不确定，名字也不确定--><div class="basic" :class="classArr">{{label}}</div><br/><br/><!--    绑定class样式——对象写法，适用于：要绑定的样式个数确定，名字也确定，但需要动态决定用不用--><div class="basic" :class="classObj">{{label}}</div><br/><br/><!--    绑定style样式——对象写法--><div class="basic" :style="styleObj">{{label}}</div><br/><br/><!--    绑定style样式——数组写法--><div class="basic" :style="styleArr">{{label}}</div><br/><br/>
</div>
<script>// 设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false;// 创建Vue实例new Vue({// el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串el: '#root',data:{label: '不写八个',mood: 'normal',classArr: ['nobug1', 'nobug2', 'nobug3'],classObj: {nobug1: false,nobug2: true,},styleObj:{fontSize: '40px',},styleArr: [{fontSize: '40px',},{color: 'red'}]},methods:{changeMood(){const arr = ['normal', 'happy', 'sad'];// Math.random()产生的数值介于 0,1之间，可以等于0，但是不会等于1；let index = Math.floor(Math.random() * 3);this.mood = arr[index];}}})
</script>
</body>
</html>

完整实现效果

在这里插入图片描述

相关文章：

Vue教程(五)：样式绑定——class和style

1、样式代码准备 样式提前准备 <style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg, yellow, pink, orange, yellow);}.sad{border: 4px …...

编程日记 2023/8/22 1:31:18

开放网关架构演进

作者&#xff1a;庄文弘&#xff08;弘智&#xff09; 淘宝开放平台是阿里与外部生态互联互通的重要开放途径&#xff0c;通过开放的产品技术把阿里经济体一系列基础服务&#xff0c;像水、电、煤一样输送给我们的商家、开发者、社区媒体以及其他合作伙伴&#xff0c;推动行业的…...

编程日记 2023/8/22 1:30:17

torch一些操作

Pytorch文档 Pytorch 官方文档 https://pytorch.org/docs/stable/index.html pytorch 里的一些基础tensor操作讲的不错 https://blog.csdn.net/abc13526222160/category_8614343.html 关于pytorch的Broadcast,合并与分割,数学运算,属性统计以及高阶操作 https://blog.csd…...

编程日记 2023/8/22 1:29:14

ICCV23 | Ada3D：利用动态推理挖掘3D感知任务中数据冗余性

​ 论文地址&#xff1a;https://arxiv.org/abs/2307.08209 项目主页&#xff1a;https://a-suozhang.xyz/ada3d.github.io/ 01. 背景与动因 3D检测(3D Detection)任务是自动驾驶任务中的重要任务。由于自动驾驶任务的安全性至关重要(safety-critic)&#xff0c;对感知算法的延…...

编程日记 2023/8/22 1:28:11

软件工程模型-架构师之路（四）

软件工程模型 敏捷开发&#xff1a; 个体和交互 胜过 过程和工具、可以工作的软件 胜过 面面俱到的文件、客户合作胜过合同谈判、响应变化 胜过 循序计划。&#xff08;适应需求变化&#xff0c;积极响应&#xff09; 敏捷开发与其他结构化方法区别特点&#xff1a;面向人的…...

编程日记 2023/8/22 1:27:10

ubuntu20.04共享文件夹—— /mnt/hgfs里没有共享文件夹

参考文章&#xff1a;https://blog.csdn.net/Edwinwzy/article/details/129580636 虚拟机启用共享文件夹后&#xff0c;/mnt/hgfs下面为空&#xff0c;使用 vmware-hgfsclient 查看设置的共享文件夹名字也是为空。 解决方法&#xff1a; 1. 重新安装vmware tools. 在菜单…...

编程日记 2023/8/22 1:26:07

Redis中的有序集合及其底层跳表

前言 本文着重介绍Redis中的有序集合的底层实现中的跳表 有序集合 Sorted Set Redis中的Sorted Set 是一个有序的无重复值的集合&#xff0c;他底层是使用压缩列表和跳表实现的&#xff0c;和Java中的HashMap底层数据结构&#xff08;1.8&#xff09;链表红黑树异曲同工之妙…...

编程日记 2023/8/22 1:25:06

js 小程序限流函数 return闭包函数执行不了

问题&#xff1a; 调用限流 &#xff0c;没走闭包的函数&#xff1a; checkBalanceReq&#xff08;&#xff09; loadsh.js // 限流 const throttle (fn, context, interval) > {console.log(">>>>cmm throttle", context, interval)let canRun…...

编程日记 2023/8/22 1:24:05

【数据结构】堆的初始化——如何初始化一个大根堆？

文章目录 源码是如何插入的&#xff1f;扩容向上调整实现大根堆代码&#xff1a; 源码是如何插入的&#xff1f; 扩容 在扩容的时候&#xff0c;如果容量小于64&#xff0c;那就2倍多2的扩容&#xff1b;如果大于64&#xff0c;那就1.5倍扩容。 还会进行溢出的判断&#xff0c…...

编程日记 2023/8/22 1:23:04

【韩顺平 零基础30天学会Java】程序流程控制（2days）

day1 程序流程控制&#xff1a;顺序控制、分支控制、循环控制 顺序控制&#xff1a;从上到下逐行地执行&#xff0c;中间没有任何判断和跳转。 Java中定义变量时要采用合法的前向引用。 分支控制if-else&#xff1a;单分支、双分支和多分支。 单分支 import java.util.Scann…...

编程日记 2023/8/22 1:22:03

从入门到精通Python隧道代理的使用与优化

哈喽&#xff0c;Python爬虫小伙伴们&#xff01;今天我们来聊聊如何从入门到精通地使用和优化Python隧道代理&#xff0c;让我们的爬虫程序更加稳定、高效&#xff01;今天我们将对使用和优化进行一个简单的梳理&#xff0c;并且会提供相应的代码示例。 1. 什么是隧道代理&…...

编程日记 2023/8/22 1:21:01

19万字智慧城市总体规划与设计方案WORD

导读&#xff1a;原文《19万字智慧城市总体规划与设计方案WORD》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 感知基础设施 感知基础设施架构由感知范围、感知手…...

编程日记 2023/8/22 1:20:00

[赛博昆仑] 腾讯QQ_PC端,逻辑漏洞导致RCE漏洞

简介 !! 内容仅供学习,请不要进行非法网络活动,网络不是法外之地!! 赛博昆仑是国内一家较为知名的网络安全公司&#xff0c;该公司今日报告称 Windows 版腾讯 QQ 桌面客户端出现高危安全漏洞&#xff0c;据称“黑客利用难度极低、危害较大”&#xff0c;腾讯刚刚已经紧急发布…...

编程日记 2023/8/22 1:18:59

python Requests

Requests概述 官方文档&#xff1a;http://cn.python-requests.org/zh_CN/latest/,Requests是python的HTTP的库&#xff0c;我们可以安全的使用 Requests安装 pip install Requests -i https://pypi.tuna.tsinghua.edu.cn/simple Requests的使用 Respose的属性 属性说明url响…...

编程日记 2023/8/22 1:17:57

【深入解析：数据结构栈的魅力与应用】

本章重点 栈的概念及结构 栈的实现方式 数组实现栈接口 栈面试题目 概念选择题 一、栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数…...

编程日记 2023/8/22 1:16:56

安卓机显示屏的硬件结构

显示屏的硬件结构 显示屏的硬件结构主要由背光源、液晶面板和驱动电路构成。可以将液晶面板看成一个三明治的结构&#xff0c;即在两片偏振方向互相垂直的偏光片系统中夹着一层液晶层。自然光源通过起偏器&#xff08;偏光片之一&#xff09;后&#xff0c;变成了垂直方向的偏…...

编程日记 2023/8/22 1:15:55

基于swing的超市管理系统java仓库库存进销存jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于swing的超市管理系统 系统有3权限&#xff1a;管…...

编程日记 2023/8/22 1:14:54

常用系统命令

重定向 cat aa.txt > bbb.txt 将输出定向到bbb.txt cat aaa.txt >> bbb.txt 输出并追加查看进程 ps ps -ef 显示所有进程 例⼦&#xff1a;ps -ef | grep mysql |&#xff1a;管道符 kill pid 结束进程&#xff0c; 如 kill 3732&#xff1b;根据进程名结束进程可以先…...

编程日记 2023/8/22 1:13:52

【Spring专题】Spring之Bean生命周期源码解析——阶段四（Bean销毁）（拓展，了解就好）

目录 前言阅读建议 课程内容一、Bean什么时候销毁二、实现自定义的Bean销毁逻辑2.1 实现DisposableBean或者AutoCloseable接口2.2 使用PreDestroy注解2.3 其他方式&#xff08;手动指定销毁方法名字&#xff09; 三、注册销毁Bean过程及方法详解3.1 AbstractBeanFactory#requir…...

编程日记 2023/8/22 1:12:51

配置Docker，漏洞复现

目录 配置Docker 漏洞复现 配置Docker Docker的配置在Linux系统中相对简单&#xff0c;以下是详细步骤&#xff1a; 1.安装Docker&#xff1a;打开终端&#xff0c;运行以下命令以安装Docker。 sudo apt update sudo apt install docker.io 2.启动Docker服务&#xff1a;运…...

编程日记 2023/8/22 1:11:50

微信小程序 游戏水平评估系统的设计与实现_pzbe0

近年来&#xff0c;随着互联网的蓬勃发展&#xff0c;游戏公司对信息的管理提出了更高的要求。传统的管理方式已无法满足现代人们的需求。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;随着各行业的不断发展&#xff0c;使命召…...

编程日记 2023/8/22 1:10:49

moba登录不进去提示修改问题问题解决方式

问题&#xff1a; 安装moba后&#xff0c;运行时运行不起来&#xff0c;提示输入密码&#xff0c;安装、卸载多个版本都不行 方法&#xff1a; 使用ResetMasterPassword工具进行重置主密码 官网下载地址&#xff1a; MobaXterm Xserver and tabbed SSH client - resetmaster…...

编程日记 2023/8/22 1:09:48

Unsafe upfileupload

文章目录 client checkMIME Typegetimagesize 文件上传功能在web应用系统很常见&#xff0c;比如很多网站注册的时候需要上传头像、上传附件等等。当用户点击上传按钮后&#xff0c;后台会对上传的文件进行判断 比如是否是指定的类型、后缀名、大小等等&#xff0c;然后将其按…...

编程日记 2023/8/22 1:08:44

机器人制作开源方案 | 滑板助力器

我们可以用一块废滑板做些什么呢&#xff1f; 如今&#xff0c;越来越多的人选择电动滑板作为代步工具或娱乐方式&#xff0c;市场上也涌现出越来越多的电动滑板产品。 &#xff08;图片来源&#xff1a;Backfire Zealot X Belt Drive Electric Skateboard– Backfire Board…...

编程日记 2023/8/22 1:07:43

飞机打方块（二）游戏界面制作

一、背景 1.新建bg节点 二、飞机节点功能实现 1.移动 1.新建plane节点 2.新建脚本GameController.ts,并绑定Canvas GameControll.ts const { ccclass, property } cc._decorator;ccclass export default class NewClass extends cc.Component {property(cc.Node)canvas:…...

编程日记 2023/8/22 1:06:40

自我理解：精度(precision)和召回(recall)

1、精度(precision) 精度是用于评估分类模型的一个重要指标。它反映了模型预测为正例的样本中&#xff0c;实际真正为正例样本的比例。 【注】正例样本指在二分类问题中&#xff0c;被标注为正类的样本。 例如&#xff1a;在垃圾邮件分类任务中&#xff0c;正例样本就是真实的…...

编程日记 2023/8/22 1:05:38

Nginx 使用 HTTPS（准备证书和私钥）

文章目录 Nginx生成自签名证书和配置Nginx HTTPS&#xff08;准备证书和私钥&#xff09;准备证书和私钥 Nginx生成自签名证书和配置Nginx HTTPS&#xff08;准备证书和私钥&#xff09; 准备证书和私钥 生成私钥 openssl genrsa -des3 -out server.key 2048这会生成一个加密…...

编程日记 2023/8/22 1:04:37

Java：集合框架：Set集合、LinkedSet集合、TreeSet集合、哈希值、HashSet的底层原理

Set集合 创建一个Set集合对象&#xff0c;因为Set是一个接口不能直接new一个对象&#xff0c;所以要用一个实现类来接 HashSet来接 无序性只有一次&#xff0c;只要第一次运行出来后&#xff0c;之后再运行的顺序还是第一次的顺序。 用LinkedSet来接 有序 不重复 无索引 用Tree…...

编程日记 2023/8/22 1:03:33

自定义Taro的navBar的宽度和高度

本方法是计算自定义navbar的宽度和高度&#xff0c;输出的参数有 navBarHeight, menuBottom,menuHeight, menuRectWidth,windowWidth, windowHeight,具体代码如下&#xff1a; export function getCustomNavBarRect():| {navBarHeight: number;menuBottom: number;menuHeight:…...

编程日记 2023/8/22 1:02:29

用Python编程实现百度自然语言处理接口的对接，助力你开发智能化处理程序

用Python编程实现百度自然语言处理接口的对接&#xff0c;助力你开发智能化处理程序 随着人工智能的不断进步&#xff0c;自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;成为了解决文本处理问题的重要工具。百度自然语言处理接口提供了一系…...

编程日记 2023/8/22 1:01:26