初学Vue练手的简易todolist

此简易Demo就不写样式了，主要是熟悉Vue的指令功能：添加、删除待办事项&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head lang=&quot;en&quot;&amp;gt;&a

Jacky-Summer

602人浏览 · 2018-05-15 20:51:16

Jacky-Summer · 2018-05-15 20:51:16 发布

此简易Demo就不写样式了，主要是熟悉Vue的指令

功能：添加、删除待办事项
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>todolist</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>简易todolistDemo</h2>
        <input type="text" v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
        <p>待办事项:</p>
        <ul>
            <todo-item v-for="(item,index) in list"
                :key="index"
                :content="item"
                :index="index"
                @delete="handleDelete">
            </todo-item>
        </ul>

    </div>
<script>

    Vue.component('todo-item',{
        props:['content','index'],
        template:'<li @click="handleClick">{{content}}</li>',
        methods:{
            handleClick:function(){
                this.$emit('delete',this.index);
            }
        }
    });

    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue);
                this.inputValue = '';
            },
            handleDelete:function(index){
                this.list.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^