需求实战一

组件来源

  • 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组件,包含了以下功能:

1. 使用ARow和ACol组件创建一个行列布局,将后续的内容居中显示。
2. 使用a-progress组件展示一个圆形进度条,进度的百分比由number变量控制。
3. 使用a-button组件创建两个按钮,分别是"增加百分之十"和"减少百分之十",点击按钮会调用addNumber和minNumber方法来增加或减少number变量的值。
4. 使用a-slider组件展示一个滑动条,滑动条的值与number变量进行双向绑定,可以通过拖动滑块来改变number的值。disabled变量控制滑动条是否可用。
5. 使用a-space组件创建一个间距容器,容器中包含四个a-button按钮,按钮之间的间距由number变量控制。

这段代码使用了Vue 3的Composition API,通过ref函数创建了响应式的变量和函数。它实现了一个简单的进度条、按钮和滑动条的交互效果,并通过number变量控制了它们的状态和显示。

需求实战三

组件来源

  • 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>

代码解读

这段代码是一个简单的待办事项列表的实现。它使用了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" 按钮删除已完成的事项。你可以根据这段代码写一篇关于待办事项列表实现的博客。

需求实战四

组件来源

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

效果展示

代码展示

<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. 使用v-model指令将输入框的值与newTodo变量进行双向绑定,用于输入新的待办事项内容。
2. 点击"新增"按钮(addTodo方法)将输入框中的内容添加到待办事项列表(todos数组)中,并清空输入框。
3. 使用v-model指令将输入框的值与searchQuery变量进行双向绑定,用于输入查询关键字。
4. 使用v-for指令遍历filteredTodos计算属性中的待办事项列表,将每个待办事项以列表项的形式展示出来。
5. 每个列表项包含待办事项的内容、"删除"按钮(deleteTodo方法)和"编辑"按钮(editTodo方法)。
6. filteredTodos计算属性根据searchQuery的值对待办事项列表进行过滤,只显示包含查询关键字的待办事项。

这段代码使用了Vue 3的Composition API,通过ref函数创建了响应式的变量和函数,使用computed函数创建了计算属性。它实现了待办事项的添加、删除、编辑和查询功能,并将相关的数据和方法进行了封装和组织。

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/yyyyfly1/p/17576202.html

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!

相关课程