需求实战一

组件来源

  • ant-design-vue
  • Button 按钮
  • Progress 进度条

效果展示

代码展示

<template>
<ARow>
<ACol>
<div style="padding:30px"> <a-progress type="circle" :percent="number" />
</div>
<div style="padding:30px 0 30px 50px"> <a-button type="primary" @click="addNumber">增加数值</a-button>
</div>
<div style="padding:30px 0 30px 50px">
<a-button type="primary" @click="minNumber">增加数值</a-button>
</div>
</ACol>
</ARow> </template>
<script setup lang="ts">
const number=ref(80); const addNumber = () => {
number.value=number.value+10;
};
const minNumber = () => {
number.value=number.value-10;
};
</script>

代码解读

这段代码是一个Vue组件的模板和脚本部分。它包含一个进度条和两个按钮,点击按钮可以增加或减少进度条的数值。
 
在模板部分,使用了Ant Design Vue库中的ARow和ACol组件来创建一个行列布局。进度条使用了a-progress组件,并通过:percent属性绑定了一个名为number的变量,表示进度条的数值。
 
在脚本部分,使用了Vue 3的<script setup>语法来定义组件的逻辑。首先,使用ref函数创建了一个名为number的响应式变量,并初始化为80。然后,定义了两个方法addNumber和minNumber,分别用于增加和减少number的值。在方法中,通过修改number.value来改变进度条的数值。
 
这段代码的作用是展示一个带有进度条和按钮的界面,并且可以通过按钮来增加或减少进度条的数值。

需求实战二

组件来源

  • ant-design-vue
  • Button 按钮
  • Progress 进度条
  • Slider 滑动输入条
  • Space 间距

效果展示

代码展示

<template>
<ARow style="display: flex; justify-content: center; align-items: center; "> <ACol >
<div style="display: flex; justify-content: center; align-items: center; padding: 30px 0;">
<a-progress type="circle" :percent="number" />
</div>
<div style="display: flex; justify-content: center; align-items: center; padding: 30px 0;">
<div style="padding:0 10px 0 0">
<a-button type="primary" @click="addNumber">增加百分之十</a-button>
</div>
<div style="padding:0 0 0 10px"> <a-button type="primary" @click="minNumber">减少百分之十</a-button>
</div>
</div> <div style="padding: 30px 0;">
<a-slider id="test" v-model:value="number" :disabled="disabled" />
</div>
<div style="display: flex; justify-content: center; align-items: center; padding: 30px 0;"> <a-space :size="number">
<a-button type="primary">Button</a-button>
<a-button type="primary">Button</a-button>
<a-button type="primary">Button</a-button>
<a-button type="primary">Button</a-button>
</a-space>
</div> </ACol>
</ARow> </template>
<script setup lang="ts">
const number=ref(80);
const disabled=ref(false);
const addNumber = () => {
number.value=number.value+10;
};
const minNumber = () => {
number.value=number.value-10;
};
</script>

代码解读

这段代码是一个Vue组件的模板和脚本部分。它包含一个进度条和两个按钮,点击按钮可以增加或减少进度条的数值。
 
在模板部分,使用了Ant Design Vue库中的ARow和ACol组件来创建一个行列布局。进度条使用了a-progress组件,并通过:percent属性绑定了一个名为number的变量,表示进度条的数值。
 
在脚本部分,使用了Vue 3的<script setup>语法来定义组件的逻辑。首先,使用ref函数创建了一个名为number的响应式变量,并初始化为80。然后,定义了两个方法addNumber和minNumber,分别用于增加和减少number的值。在方法中,通过修改number.value来改变进度条的数值。
 
这段代码的作用是展示一个带有进度条和按钮的界面,并且可以通过按钮来增加或减少进度条的数值。

需求实战三

组件来源

  • JS代码

效果展示

代码展示

<template>
<div>
<h1>To Do List</h1>
<input v-model="newTodo" placeholder="Add a new todo" /> <button @click="addTodo">Add</button>
<ul>
<li style="padding:5px" v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="deleteTodo(index)">Delete</button>
</li>
</ul>
</div>
</template> <script setup lang="ts"> const todos = ref<string[]>([]);
const newTodo = ref<string>(''); const addTodo = () => {
if (newTodo.value !== '') {
todos.value.push(newTodo.value);
newTodo.value = '';
}
}; const deleteTodo = (index: number) => {
todos.value.splice(index, 1);
};
</script>

需求实战四

组件来源

  • ant-design-vue
  • Button 按钮
  • Input 输入框

代码解读

这段代码是一个简单的待办事项列表的实现。它使用了Vue 3的Composition API来管理数据和逻辑。
 
首先,在模板中,有一个标题 "To Do List",一个输入框用于添加新的待办事项,一个 "Add" 按钮用于将新的待办事项添加到列表中,以及一个用于显示待办事项的无序列表。每个待办事项都有一个 "Delete" 按钮,用于删除该事项。
 
在 <script setup> 部分,我们使用了 ref 函数来创建了两个响应式变量 todos 和 newTodo。todos 是一个字符串数组,用于存储所有的待办事项。newTodo 是一个字符串,用于存储用户在输入框中输入的新待办事项。
 
接下来,我们定义了两个函数 addTodo 和 deleteTodo。addTodo 函数用于将新的待办事项添加到 todos 数组中,并清空输入框的内容。deleteTodo 函数用于根据索引从 todos 数组中删除指定的待办事项。
 
在模板中,我们使用 v-for 指令遍历 todos 数组,并为每个待办事项创建一个列表项。每个列表项都有一个 "Delete" 按钮,点击该按钮会调用 deleteTodo 函数来删除对应的待办事项。
 
这段代码实现了一个简单的待办事项列表,用户可以通过输入框添加新的待办事项,并可以通过点击 "Delete" 按钮删除已完成的事项。你可以根据这段代码写一篇关于待办事项列表实现的博客。

效果展示

代码展示

<template>
<div>
<h1>列表展示</h1>
<input v-model="newTodo" placeholder="新增内容" /> &nbsp&nbsp&nbsp
<a-button type="primary" @click="addTodo">新增</a-button>
<div style="padding:10px 0 0 0">
<input v-model="searchQuery" placeholder="查询内容" /> <ul> <li style="padding:5px 0 0 0; display: flex; align-items: center;" v-for="(todo, index) in filteredTodos" :key="index">
{{"【"+(index+1)+"】"+ todo }}&nbsp&nbsp&nbsp
<a-button type="primary" danger @click="deleteTodo(index)">删除</a-button>
&nbsp&nbsp&nbsp
<a-button type="primary" @click="editTodo(index)">编辑</a-button> <br>
<br>
</li>
</ul>
</div>
</div>
</template> <script setup lang="ts"> const todos = ref<string[]>([]);
const newTodo = ref<string>('');
const searchQuery = ref<string>(''); const addTodo = () => {
if (newTodo.value !== '') {
todos.value.push(newTodo.value);
newTodo.value = '';
}
}; const deleteTodo = (index: number) => {
todos.value.splice(index, 1);
}; const editTodo = (index: number) => {
const newContent = prompt("Enter new content:");
if (newContent !== null) {
todos.value[index] = newContent;
}
}; const filteredTodos = computed(() => {
return todos.value.filter(todo => {
return todo.toLowerCase().includes(searchQuery.value.toLowerCase());
});
});
</script>

代码解读

 
这段代码是一个简单的Vue组件,用于展示一个待办事项列表。以下是代码的解释:
 
1. todos是一个响应式的数组,用于存储所有的待办事项。
2. newTodo是一个响应式的字符串,用于存储用户输入的新待办事项。
3. searchQuery是一个响应式的字符串,用于存储用户输入的查询内容。
4. addTodo是一个函数,用于将newTodo的值添加到todos数组中,并清空newTodo的值。
5. deleteTodo是一个函数,用于根据索引从todos数组中删除对应的待办事项。
6. editTodo是一个函数,用于根据索引修改todos数组中对应的待办事项。它会弹出一个对话框,让用户输入新的内容。
7. filteredTodos是一个计算属性,它根据searchQuery的值过滤todos数组,返回匹配的待办事项列表。
 
在模板部分,使用了Vue的指令和事件绑定来实现交互功能。用户可以输入新的待办事项,点击"新增"按钮将其添加到列表中。用户还可以输入查询内容,列表会根据查询内容进行过滤显示。每个待办事项都有"删除"和"编辑"按钮,点击"删除"按钮会将其从列表中删除,点击"编辑"按钮会弹出对话框让用户修改内容。
 
这段代码可以作为一个简单的待办事项列表的基础,你可以根据需要进行修改和扩展,以满足具体的需求。

【技术实战】Vue技术实战【一】的更多相关文章

  1. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  2. 躬身入局,干货分享,2023年春招后端技术岗(Python)面试实战教程,Offer今始为君发

    早春二月,研发倍忙,杂花生树,群鸥竟飞.为什么?因为春季招聘,无论是应届生,还是职场老鸟,都在摩拳擦掌,秣马厉兵,准备在面试场上一较身手,既分高下,也决Offer,本次我们打响春招第一炮,躬身入局,让 ...

  3. 深度解析SDN——利益、战略、技术、实践(实战派专家力作,业内众多专家推荐)

    深度解析SDN——利益.战略.技术.实践(实战派专家力作,业内众多专家推荐) 张卫峰 编   ISBN 978-7-121-21821-7 2013年11月出版 定价:59.00元 232页 16开 ...

  4. 基于TC技术的网络流量控制实战

    本文转载在:http://server.it168.com/a2010/0426/878/000000878406.shtml 基于TC技术的网络流量控制实战 650) this.width=650; ...

  5. 超级干货:动态防御WAF技术原理及编程实战!

    本文带给大家的内容是动态防御WAF的技术原理及编程实战. 将通过介绍ShareWAF的核心技术点,向大家展示动态防御的优势.实现思路,并以编程实战的方式向大家展示如何在WAF产品开发过程中应用动态防御 ...

  6. 简读《ASP.NET Core技术内幕与项目实战》之3:配置

    特别说明:1.本系列内容主要基于杨中科老师的书籍<ASP.NET Core技术内幕与项目实战>及配套的B站视频视频教程,同时会增加极少部分的小知识点2.本系列教程主要目的是提炼知识点,追求 ...

  7. 快读《ASP.NET Core技术内幕与项目实战》EFCore2.5:集合查询原理揭秘(IQueryable和IEnumerable)

    本节内容,涉及4.6(P116-P130).主要NuGet包:如前述章节 一.LINQ和EFCore的集合查询扩展方法的区别 1.LINQ和EFCore中的集合查询扩展方法,虽然命名和使用完全一样,都 ...

  8. 快读《ASP.NET Core技术内幕与项目实战》WebApi3.1:WebApi最佳实践

    本节内容,涉及到6.1-6.6(P155-182),以WebApi说明为主.主要NuGet包:无 一.创建WebApi的最佳实践,综合了RPC和Restful两种风格的特点 1 //定义Person类 ...

  9. 《ASP.NET Core技术内幕与项目实战》精简集-目录

    本系列是杨中科2022年最新作品<ASP.NET Core技术内幕与项目实战>及B站配套视频(强插点赞)的精简集,是一个读书笔记.总结和提炼了主要知识点,遵守代码优先原则,以利于快速复习和 ...

  10. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

随机推荐

  1. Active Record Associations

    The Types of Associations 在 Rails 中,可以通过 ActiveRecord 来定义不同类型的关联关系(Associations),包括以下几种: belongs_to: ...

  2. 批量更新Postgresql的序列

    序列(sequence)是 PostgreSQL 中的一种对象,用于生成自动递增的唯一标识符.通常,序列会与表的自增主键一起使用,以确保每个新插入的行都有一个唯一的标识符.在某些情况下,可能需要更新序 ...

  3. Spring之丐版IOC实现

    文章目录 IOC控制反转 依赖注入 Bean的自动装配方式 丐版IOC实现 BeanDefinition.java ResourceLoader.java BeanRegister.java Bean ...

  4. Stream方法的介绍

    文章目录 前言 Lambda表达式 格式 函数式接口 Stream的方法介绍 forEach filter collect count sum limit 和skip groupingBy reduc ...

  5. LeetCode 周赛 343(2023/04/30)结合「下一个排列」的贪心构造问题

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 今天是五一假期的第二天,打周赛的人数比前一天的双周赛多了,难道大家都只玩一天吗?这场周赛 ...

  6. flask接口参数校验 jsonschema 的使用

    开头 flask接口开发中参数校验可以用到的方法有很多,但是我比较喜欢跟前端的js检验类似,故选用到了 jsonschema 这个参数校验的库 Demo 下面是一个比较全的参数校验的接口,日后方便参考 ...

  7. 2020-10-23:go中channel的创建流程是什么?

    福哥答案2020-10-23:1.元素大小是否小于2的16次方,否则throw.2.对齐检查,否则throw.3.元素大小和容量的乘积不能超出范围,否则panic.4.生成*hchan,设置buf.4 ...

  8. 2021-10-12:验证回文串。给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写。说明:本题中,我们将空字符串定义为有效的回文串 。输入: “A man, a plan

    2021-10-12:验证回文串.给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写.说明:本题中,我们将空字符串定义为有效的回文串 .输入: "A man, a ...

  9. python 之路,致那些年,我们依然没搞明白的编码

    摘自:金角大王https://www.cnblogs.com/alex3714/articles/7550940.html 本节内容 编码回顾 编码转换 Python的bytes类型 编码回顾 在备编 ...

  10. Redis使用lua脚本实现库存扣减

    为什么使用Lua脚本为什么能合并多个原子操作? Redis官方文档:https://redis.io/docs/manual/programmability/eval-intro/ Redis 保证脚 ...