目录

一.class类的绑定

1.静态编写

2.动态编写

二.style内联样式的绑定

三.事件处理

1.案例1

2.案例2

四.uniapp创建自定义页面模板

1.为什么要这么做?

2.步骤

①打开新建页面的界面

②在弹出的目录下,新建模板文件

③用HBuilderX打开该模板文件,填写代码,并保存文件

④下次创建页面时,直接创建该模板页面即可,就能直接生成一个页面的基础代码


一.class类的绑定

1.静态编写

代码:

<template><view><button class="btn01 moreCss">更换样式</button></view>
</template><script setup></script><style lang="scss">
.btn01{height:100px;width:100px;
}
.moreCss{background:pink;
}</style>

运行效果:

可见此时button元素,同时应用了btn01和moreCss这两个Css样式

2.动态编写

代码:

<template>	<view><button class="btn01" :class="isShow?'moreCss':''" @click="changeCss">更换样式</button></view>
</template><script setup>
import {ref} from 'vue';
const isShow = ref(false);const changeCss = () => {isShow.value = !isShow.value;
}
</script><style lang="scss">
.btn01{height:100px;width:100px;
}
.moreCss{background:pink;
}
</style>

运行效果:

点击一下这个按钮,就会发生样式的变化:

代码解读:

当我们点击按钮时,会让isShow这个变量的值,从true/false之间切换,进而影响:class="isShow?'moreCss':''"这个三元表达式的值。

:class就是v-bind:class的简写,让class可以动态赋值。

二.style内联样式的绑定

三.事件处理

1.案例1

代码:

<template><view style="height:100px;width:100px;background: pink;" @click="addOne">{{ num }}</view>
</template><script setup>
import {ref} from 'vue';const num = ref(0);
const addOne = () => {num.value++;
}
</script><style lang="scss">
</style>

运行效果:

2.案例2

代码:

<template><switch @change="onChange"/><button type="primary" :loading="isLoading">我的按钮</button>
</template><script setup>
import {ref} from 'vue';
const isLoading = ref(false);
//切换switch开关,触发的事件
const onChange = (e)=> {console.log(e.detail.value);//e.detail.value代表开关的状态,值:true/falseisLoading.value = e.detail.value;
}
</script>
<style lang="scss">
</style>

运行效果:

四.uniapp创建自定义页面模板

1.为什么要这么做?

因为以后使用uniapp写项目,当创建页面时,就可以直接创建页面模版,里面包含了基本代码。

2.步骤

①打开新建页面的界面

②在弹出的目录下,新建模板文件

③用HBuilderX打开该模板文件,填写代码,并保存文件

④下次创建页面时,直接创建该模板页面即可,就能直接生成一个页面的基础代码

可见此时,直接通过模板生成了该页面文件的基础代码。还是十分方便的!

以上就是本篇文章的全部代码,喜欢的话可以留个免费的关注呦~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/87850.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/87850.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/87850.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android 卡顿和丢帧区别

Android 卡顿&#xff08;Jank&#xff09;与丢帧&#xff08;Frame Drop&#xff09;的核心区别在于问题本质与用户感知&#xff0c;以下是分层解析&#xff1a; ️ 一、本质差异 维度卡顿&#xff08;Jank&#xff09;丢帧&#xff08;Frame Drop&#xff09;定义用户可感知…

【python实用小脚本-125】基于 Python 的 Gmail 邮件发送工具:实现高效邮件自动化

引言 在现代办公和开发环境中&#xff0c;邮件通信是一种重要的沟通方式。自动化发送邮件可以大大提高工作效率&#xff0c;例如发送通知、报告或文件。本文将介绍一个基于 Python 的 Gmail 邮件发送工具&#xff0c;它能够通过 Gmail 的 SMTP 服务器发送邮件&#xff0c;并支持…

gateway断言配置详解

一、Predicate - 断⾔ 1、简单用法 spring:cloud:gateway:routes:- id: after_routeuri: https://example.orgpredicates:- After2017-01-20T17:42:47.789-07:00[America/Denver] 2、自定义断言 新建类VipRoutePredicateFactory&#xff0c;注意VipRoutePredicateFactory名字…

基于大模型的尿毒症全流程预测与诊疗方案研究报告

目录 一、引言 1.1 研究背景与意义 1.2 研究目的与方法 1.3 国内外研究现状 二、尿毒症相关理论基础 2.1 尿毒症的定义、病因与发病机制 2.2 尿毒症的症状与诊断标准 2.3 尿毒症的治疗方法概述 三、大模型技术原理与应用 3.1 大模型的基本概念与发展历程 3.2 大模型…

裸金属服务器租用平台-青蛙云

企业对服务器性能与灵活性的要求与日俱增。青蛙云M-启强裸金属服务器租用平台应运而生&#xff0c;为企业提供了一种兼具物理机性能和云计算弹性的解决方案。裸金属服务器租用平台的优势​(一)高配性能&#xff0c;无虚拟化开销​裸金属服务器直接运行在物理硬件之上&#xff0…

[Terence Tao访谈] AlphaProof系统 | AI嗅觉 | 研究生学习 | 庞加莱猜想(高维) | 复杂问题简单化

玩这些有趣的东西。通常情况下什么也得不到&#xff0c;你必须学会说&#xff1a;“好吧&#xff0c;再试一次&#xff0c;什么都没发生&#xff0c;我会继续前进。” DeepMind的AlphaProof系统 Q&#xff1a;DeepMind的AlphaProof系统是通过强化学习训练的&#xff0c;使用的…

Aseprite工具入门教程4之动画导入Unity

1、时间轴功能 &#xff08;1&#xff09;眼睛图标 显示/隐藏图层图层隐藏时无法绘制 &#xff08;2&#xff09;锁定图标 锁定后无法移动或编辑图层防止意外在错误图层上绘制 &#xff08;3&#xff09;单元格图标 两个点代表帧分开&#xff0c;一个椭圆代表帧统一。分开就…

移动硬盘频繁提示格式化?解决异常故障的正确方法

移动硬盘作为数据存储的重要工具&#xff0c;不少人都习惯将照片、文档、项目资料甚至整台电脑的备份都放在里面。但有时&#xff0c;一件令人头疼的事悄然发生&#xff1a; 插上硬盘&#xff0c;系统却突然提示&#xff1a;“使用驱动器中的光盘之前需要将其格式化。是否要将…

Java泛型笔记

1 为什么需要泛型 Java5之前&#xff0c;是没有泛型的。通过两段代码我们就可以知道为何我们需要泛型 public int addInt(int a, int b) {return a b; }public double addDouble(double a, double b) {return a b; } 实际开发中&#xff0c;经常有数值类型求和的需求&…

mysql 图形化界面工具 DataGrip 安装与配置

安装地址&#xff1a; Download DataGrip: Cross-Platform IDE for Databases & SQLhttps://www.jetbrains.com/datagrip/download/?sectionwindows 添加数据源&#xff1a; 下载驱动文件&#xff1a;直接点击下载即可 点击测试连接&#xff1a;成功后点击确定 显示所有数…

linux下进程之间socket通信c程序例程

以下是一个基于 Linux 的 C 程序示例&#xff0c;展示了如何使用 Unix 域套接字&#xff08;Unix domain socket&#xff09;在不同进程之间互传 JSON 消息。我们将实现一个简单的客户端 - 服务器模型&#xff0c;服务器监听连接&#xff0c;客户端连接到服务器并发送 JSON 消息…

高云GW5AT-LV60 FPGA图像处理板|MIPI摄像头帧率测试

高云GW5AT-LV60 FPGA图像处理板套件中附带了三个摄像头模组&#xff0c;这三个模组真是各有千秋&#xff0c;接下来我通过简单的一些测试来看看这几个摄像头的差异。 VS-SC130GS 、 VS-SC2210 这两个模组是手动对焦&#xff0c;在使用时需要手动转动镜头调整焦距&#xff0c;这…

机器学习在智能能源管理中的应用:需求响应与可再生能源整合

随着全球能源需求的不断增长和环境问题的日益突出&#xff0c;智能能源管理成为实现可持续发展的关键。智能能源管理系统通过整合先进的信息技术&#xff0c;如物联网&#xff08;IoT&#xff09;、大数据和机器学习&#xff0c;能够优化能源的分配和使用&#xff0c;提高能源效…

【网络】Linux 内核优化实战 - net.ipv4.tcp_timestamps

目录 net.ipv4.tcp_timestamps 详解1. 功能与作用2. 参数取值与含义3. 启用/禁用的影响4. 配置方法5. 适用场景建议6. 注意事项总结 net.ipv4.tcp_timestamps 详解 net.ipv4.tcp_timestamps 是 Linux 内核中一个与 TCP 协议相关的网络参数&#xff0c;用于控制是否启用 TCP 时…

第一个Flink 程序:词频统计 WordCount(流处理)

本文重点 本文将通过一个统计词频的小程序来看一下flink是如何对数据进行批处理的,需要声明的是,一般我们使用Flink常常用于流式处理,即使是有界的数据,我们也将其看成是无界数据进行流式处理,所以批量处理并不是很常用,这里只是为了了解一下Flink是如何进行批处理的。 …

在 Kodi 中添加 AList 搭建 WebDav 的方法

文章目录 一、问题背景二、使用方法&#xff08;一&#xff09;开启 AList 的 WebDav&#xff08;二&#xff09;在 Kodi 添加 WebDav1. 打开设置跳转到媒体设置添加指定类型的媒体库2. 选择添加媒体库3. 添加新的网络位置 一、问题背景 AList 是一种使用 Gin 和 Solidjs 编写…

DAY 49

CBAM 是一种能够集成到任何卷积神经网络架构中的注意力模块。它的核心目标是通过学习的方式&#xff0c;自动获取特征图在通道和空间维度上的重要性&#xff0c;进而对特征图进行自适应调整&#xff0c;增强重要特征&#xff0c;抑制不重要特征&#xff0c;提升模型的特征表达能…

LLM:位置编码详解与实现

文章目录 前言一、绝对位置编码二、相对位置编码三、旋转位置编码 前言 由于attetnion运算的特性&#xff0c;Transformer本身不感知顺序&#xff0c;位置编码是弥补这一缺陷的关键。 一、绝对位置编码 绝对位置编码的方式是通过将每个位置映射到一个高维空间中&#xff0c;该…

pytorch学习-10.卷积神经网络(基础篇)

2.线性模型 3.梯度下降算法 4.反向传播(用pytorch算梯度) 5.用pytorch实现线性回归 6.logistic回归 7.处理多维特征的输入 8.加载数据集 9.多分类问题 10.卷积神经网络&#xff08;基础篇&#xff09;_哔哩哔哩_bilibili 10.1卷积神经网络 10.1.1 卷积神经网络工作流程&…

ARMv8 创建1、2、3级页表代码与注释

对下面的地址空间创建3级页表 // level 1 table, 4 entries: // 0000 0000 - 3FFF FFFF, 1GB block, DDR // 4000 0000 - 7FFF FFFF, 1GB block, DDR // 8000 0000 - BFFF FFFF, 1GB block, DDR // C000 0000 - FFFF FFFF, point to level2 tabel // // level 2 table, 512 en…