创建vue3项目,以及使用示例

1.在根目录下cmd:vue create myobj(没有切换淘宝镜像记得切换,这样创建项目运行快)

2.

3.(按空格键选中,选好回撤就到下一步了)

4.

5.


6.

7.

8.

9.

10.

11.

12.

13.然后输入执行以下两步就已经运行项目了

以下是我的vue3练习题,复制上看一下:

<template><div>{{msg}}<hr>{{arr}}<hr><ul v-for="(item,index) in arr" :key="index"><li>{{item}}</li></ul></div><div><button @click="abc()">修改</button></div><div><!-- 第一个div点击显示数组 --><button @click="divone()">点击第一个div</button><ul v-for="(item,index) in uls" :key="index"><li>{{item}}</li></ul></div><div><!-- 第二个div点击显示随机数,大于5显示蓝色,小于五显示绿色--><button @click="divtwo()">点击第二个div</button><div :style="{'background-color': bgColor(two)}">{{two}}</div></div>
</template><script lang="ts">
// import { Options, Vue } from "vue-class-component";
import {defineComponent,ref} from 'vue'export default defineComponent({setup(){var msg = ref<string>('nihao')var arr = ref<any>(['nihao','aaaaaa'])var abc = ()=>{console.log(123456);// 点击修改,msg变成 你好 msg.value = '你好'}// 第一个divvar uls = ref<any>()var divone = ()=>{uls.value = (['1111','222','3333','4444','5555'])}// 第二个divvar two = ref<number>(0)var divtwo = ()=>{two.value = Math.floor(Math.random()*10)}var bgColor = () => {return two.value > 5 ? 'blue' : 'green';
};return {msg,arr,abc,uls,divone,two,divtwo,bgColor}
},})</script>

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

SpringMVC实现文件上传

导入文件上传相关依赖 <!--文件上传--> <dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version> </dependency> <dependency><groupId>…

鱼眼摄像头-opencv校准(基于棋盘+畸变表)

一&#xff1a;主要参数说明 1&#xff1a;内参矩阵K 是3*3的矩阵&#xff0c;其类似格式 Knp.array([ [389.2109574522624, 0.0, 630.2525667489842], [0.0, 388.505701978078, 360.7886749292513], [0.0, 0.0, 1.0]]) 2&#xff1a;畸变系数 针对鱼眼相机&#xff1a;…

粘包问题、mmap和分片上传

一、粘包问题&#xff1a; 如果一端要把文件发给另一端&#xff0c;要发送两个部分的数据&#xff1a;其一是文件名&#xff0c;用于对端创建文件&#xff1b;另一个部分是文件内容。服务端在接收文件名&#xff0c;实际上并不知道有多长&#xff0c; 所以它会试图把网络缓冲区…

v-for 进行列表的 增删改查

通过对象下标替换属性值 但是通过实践此方法是错误的&#xff0c;Vue监听的是students这个对象&#xff0c;而不是这个对象里面的数组信息&#xff0c;也就是说&#xff0c;改变里面的值&#xff0c;并不能在页面上实现更新的功能 <!DOCTYPE html> <html lang"en…

Adobe国际认证详解-动漫制作专业就业方向和前景

动漫制作专业的就业方向和前景随着创意产业的蓬勃发展而愈发广阔。这一专业涵盖了从角色设计、场景绘制到动画制作、特效合成等多个环节&#xff0c;是创意与技术相结合的典型代表。随着数字媒体和互联网的普及&#xff0c;动漫制作专业人才的需求正不断增长&#xff0c;为该专…

c++ primer plus 第16章string 类和标准模板库, 16.3.3 对矢量可执行的其他操作

c primer plus 第16章string 类和标准模板库, 16.3.3 对矢量可执行的其他操作 c primer plus 第16章string 类和标准模板库, 16.3.3 对矢量可执行的其他操作 文章目录 c primer plus 第16章string 类和标准模板库, 16.3.3 对矢量可执行的其他操作16.3.3 对矢量可执行的其他操作…

计算机毕业设计python+neo4j知识图谱中医问答系统 中医中药方剂大数据可视化 vue.js 前后端分离 大数据毕业设计 机器学习 深度学习 人工智能

背景介绍 中医问答系统开题报告 一、项目背景与意义 随着科技的飞速发展和人们生活水平的提高&#xff0c;人们对健康管理的需求日益增强。中医作为中国传统医学的瑰宝&#xff0c;其独特的理论体系、诊疗方法和养生观念在现代社会依然发挥着不可替代的作用。然而&#xff0…

华为云技术精髓笔记(四)-CES基础入门实战

华为云技术精髓笔记(四) CES基础入门实战 一、监控ECS性能 1、 远程登录ECS 步骤一 双击实验桌面的“Xfce终端”打开Terminal&#xff0c;输入以下命令登录云服务器。注意&#xff1a;请使用云服务器的公网IP替换命令中的【EIP】。 LANGen_us.UTF-8 ssh rootEIP说明&#x…

机械学习—零基础学习日志(高数09——函数图形)

零基础为了学人工智能&#xff0c;真的开始复习高数 函数图像&#xff0c;开始新的学习&#xff01; 幂函数 利用函数的性质&#xff0c;以幂函数为例&#xff0c;因为单调性相同&#xff0c;利用图中的2和3公式&#xff0c;求最值问题&#xff0c;可以直接将式子进行简化。这…

东京裸机云多IP服务器全面分析

东京裸机云多IP服务器是一种提供多IP地址分配和高性能网络服务的云计算解决方案&#xff0c;广泛应用于需要多IP管理和高稳定性的网络应用。下面将从几个方面具体介绍东京裸机云多IP服务器&#xff0c;rak部落为您整理发布东京裸机云多IP服务器的全面分析。 在数字化时代&#…

SQL injection UNION attacks SQL注入联合查询攻击

通过使用UNION关键字&#xff0c;拼接新的SQL语句从而获得额外的内容&#xff0c;例如 select a,b FROM table1 UNION select c,d FROM table2&#xff0c;可以一次性查询 2行数据&#xff0c;一行是a&#xff0c;b&#xff0c;一行是c&#xff0c;d。 UNION查询必须满足2个条…

15Kg级无人机降落伞系统技术详解

15Kg级无人机降落伞系统由以下几个主要部分组成&#xff1a; 1. 降落伞主体&#xff1a;采用轻质高强度的材料制成&#xff0c;能够承受无人机在降落过程中产生的冲击力&#xff0c;并确保无人机平稳安全地着陆。 2. 伞绳与连接机构&#xff1a;伞绳负责连接降落伞主体与无人机…

操作系统常用知识总结(基本结构+磁盘+进程)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 基本结构 冯诺依曼计算机模型 现代计算机模型是基于冯诺依曼计算…

适配器模式详解和应用

目录 适配器模式适配器模式结构适配器模式适用场景适配器模式优缺点练手题目题目描述输入描述输出描述题解 适配器模式 适配器模式是一种结构型设计模式&#xff0c; 它能使接口不兼容的对象能够相互合作。 适配器模式结构 对象适配器 实现时使用了构成原则&#xff1a; 适…

重复图片查找:巧用Python和OpenCV进行图像哈希与汉明距离检测以从海量图片中找出重复图片

重复图片查找&#xff1a;巧用Python和OpenCV进行图像哈希与汉明距离检测以从海量图片中找出重复图片 1. 导言2. 环境准备3. 图像哈希&#xff08;pHash&#xff09;原理4. 汉明距离原理5. 代码实现导入必要的库图像哈希计算函数汉明距离计算函数查找重复图片函数示例使用 在处…

C++:内存管理(new,delete)

目录 C/C内存分布 C语言内存管理 C内存管理&#xff1a; new和delete的原理 new delete malloc/free和new/delete的区别 C/C内存分布 在C/C中&#xff0c;都有一块虚拟地址&#xff0c;内部井然有序的将代码分成了几部分&#xff0c;如下表&#xff1a; 栈&#xff1a;…

C++实现LRU缓存(新手入门详解)

LRU的概念 LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;是一种常用的缓存淘汰策略&#xff0c;主要目的是在缓存空间有限的情况下&#xff0c;优先淘汰那些最长时间没有被访问的数据项。LRU 策略的核心思想是&#xff1a; 缓存空间有限&#xff1…

深入浅出C语言指针(进阶篇)

深入浅出C语言指针(基础篇) 深入浅出C语言指针(进阶篇) 目录 引言 一、指针和数组 1.数组名的理解 2.指针访问数组 3.一维数组传参的本质 二、二级指针 1.二级指针的概念 2.二级指针的内存表示 3.二级指针的解引用 三、字符指针 1.指针指向单个字符 2.指针指向字…

【目标检测】Anaconda+PyTorch配置

前言 本文主要介绍在windows系统上的Anaconda、PyTorch关键步骤安装&#xff0c;为使用yolo所需的环境配置完善。同时也算是记录下我的配置流程&#xff0c;为以后用到的时候能笔记查阅。 Anaconda 软件安装 Anaconda官网&#xff1a;https://www.anaconda.com/ 另外&#…

Golang | Leetcode Golang题解之第278题第一个错误的版本

题目&#xff1a; 题解&#xff1a; func firstBadVersion(n int) int {return sort.Search(n, func(version int) bool { return isBadVersion(version) }) }