创建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.mzph.cn/diannao/50953.shtml

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

相关文章

Linux云计算 |【第二阶段】AUTOMATION-DAY4

主要内容&#xff1a; 部署Ansible、Ansible基础命令&#xff08;Ansible ad-hoc命令格式、Ansible-doc帮助&#xff09;、Ansible模块常用&#xff1a;脚本与命令模块、文件与账户模块、软件与服务模块、逻辑卷模块 补充&#xff1a;touch 除创建文件外&#xff0c;若再创建相…

vue3知识

目录 基础vue开发前的准备vue项目目录结构模板语法属性绑定条件渲染列表渲染通过key管理状态事件处理事件传参事件修饰符数组变化侦测计算属性Class绑定style绑定侦听器表单输入绑定模板引用组件组成组件嵌套关系组件注册方式组件传递数据Props(父传子)组件传递多种数据类型组件…

SpringBoot 数据访问操作

目录 一.SpringBoot整合Mybatis与Mybatis-Plus 二.SpringBoot切换druid数据源 3.1DRUID配置参数 3.2Druid监控平台 一.SpringBoot整合Mybatis与Mybatis-Plus 步骤&#xff1a; 1.坐标 <dependency><groupId>com.baomidou</groupId><artifactId>myb…

React系列面试题

大家好&#xff0c;我是有用就点赞&#xff0c;有用就扩散。 1.React的组件间通信都有哪些形式&#xff1f; 父传子&#xff1a;在React中&#xff0c;父组件调用子组件时可以将要传递给子组件的数据添加在子组件的属性中&#xff0c;在子组件中通过props属性进行接收。这个就…

AI伦理困境与隐私保护策略:透明、公平与安全的未来

AI伦理与隐私保护&#xff1a;如何应对挑战并建立治理框架 概述&#xff1a; 随着人工智能的普及&#xff0c;AI伦理和隐私保护问题日益受到关注。本文深入探讨如何在推动AI技术发展的同时&#xff0c;确保透明度、公平性和个人隐私权不受侵犯&#xff0c;为构建负责任的AI未来…

Android ConstraintLayout 约束布局

目录 1&#xff09;ConstraintLayout 约束布局是什么&#xff1f;为什么使用&#xff1f; 2&#xff09;如何使用 3&#xff09;可见性改变后的行为处理 4&#xff09;图形化界面的一些工具介绍 5&#xff09;Chains ( 链 ) 一、ConstraintLayout 约束布局是什么 Constraint…

【无人机】测绘行业新时代

【无人机】测绘行业新时代 无人机测绘主要指的是依托无人机系统为主要的信息接收平台&#xff0c;通过无人机机载遥感信息采集和处理设备&#xff0c;将最终所获取的遥感信息传输到测绘中心&#xff0c;经过数据技术处理&#xff0c;形成立体化的数字模型&#xff0c;以满足行…

JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。 JavaScript 显示方案 JavaScript 能够以不同方式“显示”数据&#xff1a; 使用 window.alert() 写入警告框使用 document.write() 写入 HTML 输出使用 innerHTML 写入 HTML 元素使用 console.log() 写入浏览器控制台 使用 in…

想要连接稳定的远程控软件吗?这4款软件不要错过

远程控制电脑是一种现代社会高效便捷的办公方式。这种方式可以不论时间不论地点都可以调用到办公电脑里的文件&#xff0c;如果你办公也有这个需求&#xff0c;那就看看我介绍的工具吧。 1.RL远程控制 直通车>>https://www.raylink.live 这个软件非常适合用来进行手机…

Linux常用打包压缩命令

压缩命令应用场景tar大部分使用tar即可。创建&#xff0c;查看&#xff0c;解压&#xff0c;解压到指定目录gzip一般配合其他命令使用zipunzip一般用于解压zip格式的压缩包 1. tar 打包压缩命令 1.1 命令详解 【功能说明】 在Linux系统里&#xff0c;tar是将多个文件打包在…

KEEP_HIERARCHY

KEEP_HIERACHY指示工具保留用户层次结构&#xff0c;以便优化不会 跨越其边界。虽然这有助于布局规划、分析和调试&#xff0c;但它 会抑制优化&#xff0c;导致更大、更慢的设计。 建议&#xff1a;为了避免这些负面影响&#xff0c;请注册一个模块实例的所有输出&#xff0c;…

使用【Easypoi】实现百万数据导出

本文使用easypoi实现百万级数据导出 文章目录 前言一、一般情况下导出二、解决思路三、实现步骤导入依赖重写方法调用实现 结束 前言 下文实现了通过easypoi实现将百万级数据导出 一、一般情况下导出 一般导出流程&#xff08;简单导出&#xff09;&#xff1a; 创建对应的…

智能制造的规划之路线部分

作为新建FAB厂的智能制造负责人&#xff0c;实现智能制造是一个系统工程&#xff0c;需要从战略规划到具体实施的各个层面进行考虑。以下是初稿。。。 1. |明确目标和需求|&#xff1a; - 确定智能制造的目标&#xff0c;比如提高生产效率、降低成本、提升产品质量等。 …

数据库安全综合治理方案(54页PPT)附下载

方案介绍&#xff1a; 数据库安全综合治理方案是一个综合性的策略&#xff0c;旨在确保数据库系统的完整性、保密性和可用性&#xff0c;防止未经授权的访问、数据泄露、篡改及滥用。该方案涉及多个层面&#xff0c;包括访问控制、数据加密、审计与监控、备份与恢复、以及安全…

Dreambooth on Stable Diffusion

Dreambooth on Stable Diffusion 1.DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Driven Generation 2.[论文简析]DreamBooth: Fine Tuning Text-to-Image Diffusion Models…[2208.12242] 3.sd_dreambooth_extension 4.stable-dreambooth 对3-5张特定…

17.5【C语言】static的补充说明

static &#xff08;静态的) 作用&#xff1a;修饰局部变量&#xff0c;修饰全局变量&#xff0c;修饰函数 对比两段代码 #include <stdio.h> void test() {int a 5;a;printf("%d ", a); } int main() {int i 0;for(i0; i<5; i){test();}return 0; } …

HarmonyOS 质量、测试、上架速浏

1.应用质量要求&#xff1a; 1. 应用体验质量建议: 功能数据完备 功能完备 数据完备 基础体验要求 基础约束 兼容性 稳定性 性能 功耗 安全…

IPython的Bash之舞:%%bash命令全解析

IPython的Bash之舞&#xff1a;%%bash命令全解析 IPython的%%bash魔术命令为Jupyter Notebook用户提供了一种在单元格中直接执行Bash脚本的能力。这个特性特别适用于需要在Notebook中运行系统命令或Bash特定功能的场景。本文将详细介绍如何在IPython中使用%%bash命令&#xff…

reduceByKey 函数详解

reduceByKey 函数详解 实现原理 reduceByKey 函数主要用于处理分布式数据集。它接收两个操作符作为参数&#xff1a; keySelector&#xff1a;这是一个映射函数&#xff0c;用于从输入元素中提取键。 valueReducer&#xff1a;这是另一个函数&#xff0c;用于将具有相同键的…

网格布局 HTML CSS grid layout demo

文章目录 页面效果代码 (HTML CSS)参考 页面效果 代码 (HTML CSS) <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…