Vue实验二模板与指令

Yuexin️

已于 2024-07-10 10:01:35 修改

阅读量98

点赞数

文章标签： vue.js javascript 前端

于 2024-05-30 19:38:40 首次发布

本文链接：https://blog.csdn.net/Violetto_Yan/article/details/139332827

版权

实验2：模板与指令
一、实验目的
1、掌握Vue环境搭建
2、掌握模板的使用方法
3、掌握基本的指令使用``
二、实验内容
1、实现待办任务列表页面。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验2：模板与指令</title>
    <script src="vue.3.2.36.js"></script>
</head>
<body>
    <div id="app">
        <form @submit.prevent="add">
        新建任务
        <input v-model="task
        " type="text" placeholder="请输入任务...">
        <button>添加</button>
        </form>
        <ol>
            <li v-for="(item,index) in items">
                {{item}}
                <button @click="delete(index)">删除</button>
            </li>
        </ol>
        
    <script> 
        const App={
            data(){
                return{
                    task:'',
                    items:[]
                }
            },
            methods:{
                add(){
                    this.items.push(this.task);
                    this.task='';
                },
                delete(index){
                    this.items.splice(index,1);
                }
            }
        }
        Vue.createApp(App).mount("#app")
    </script>
</body>
</html>