创建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…

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 这个软件非常适合用来进行手机…

数据库安全综合治理方案(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. 应用体验质量建议: 功能数据完备 功能完备 数据完备 基础体验要求 基础约束 兼容性 稳定性 性能 功耗 安全…

网格布局 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"…

高速传输新体验:探索最新USB-C移动硬盘盒的无限可能

在数字化时代&#xff0c;数据存储的重要性不言而喻&#xff0c;而硬盘盒作为连接外部硬盘与计算机的关键设备&#xff0c;其功能也在不断进化。近年来&#xff0c;随着技术的创新与发展&#xff0c;市场上出现了一种新型硬盘盒——它不仅能安全、高效地存储和传输数据&#xf…

安装VMware Workstation Pro

一、下载 通过百度网盘分享的文件&#xff1a;VMware-workstation-full-16.2.4-2008... 链接&#xff1a;https://pan.baidu.com/s/1mDnFhLQErBlpeX_KjsgtzA 提取码&#xff1a;0bw7 二、安装 &#xff08;1&#xff09;双击exe文件 &#xff08;2&#xff09;安装软件 &…

算法-bfs-八数码

题目一 解题思路 将每一串字符都想象成一个点&#xff0c;已知起点和终点,每一次更新相邻的节点&#xff0c;采用bfs得到到达终点的最短路径。 数据结构&#xff1a; unordered_map&#xff08;哈希表&#xff09;来存储每种字符串对应情况需要移动的次数。 queue(队列)存储…

刷题计划 day4 【双指针、快慢指针、环形链表】链表下

⚡刷题计划day4继续&#xff0c;可以点个免费的赞哦~ 下一期将会开启哈希表刷题专题&#xff0c;往期可看专栏&#xff0c;关注不迷路&#xff0c; 您的支持是我的最大动力&#x1f339;~ 目录 ⚡刷题计划day4继续&#xff0c;可以点个免费的赞哦~ 下一期将会开启哈希表刷题…

vuex学习day01-vuex简述、基于脚手架创建项目、基于脚手架创建项目

1、vuex简述 之所以采用vuex是因为当我们有多个公共状态的组件时&#xff0c;vue的简单性容易崩溃 &#xff08;1&#xff09;概念 Vuex 是Vue.js 应用程序的状态管理模式库。简单讲&#xff0c;vuex是vue的一个状态管理工具。 &#xff08;2&#xff09;作用 管理vue中的…

w30-python02-pytest入门

代码如下&#xff1a; import pytest class Test_Obj:"""测试类"""#用例级别前后置def setup(self):print(用例级别------的前置处理)def teardown(self):print("用例级别--------的后置处理")# 用例def test_case1(self):print(&quo…

自动驾驶-机器人-slam-定位面经和面试知识系列05之常考公式推导(02)

这个博客系列会分为C STL-面经、常考公式推导和SLAM面经面试题等三个系列进行更新&#xff0c;基本涵盖了自己秋招历程被问过的面试内容&#xff08;除了实习和学校项目相关的具体细节&#xff09;。在知乎和牛客&#xff08;牛客上某些文章上会附上内推码&#xff09;也会同步…

mfc100u.dll 文件缺失?两种方法快速修复丢失mfc100u.dll 文件难题

您的电脑是否遭遇了 mfc100u.dll 文件缺失的问题&#xff1f;这种情况通常由多种原因引起。在本文中&#xff0c;我们将介绍两种修复 mfc100u.dll 文件丢失问题的策略——一种是手动方法&#xff0c;另一种是自动修复的使用。我们将探讨如何有效地解决 mfc100u.dll 文件缺失的几…