vue学习实现待办事项功能

先下载vue.js，网址：https://cn.vuejs.org/v2/guide/installation.html#直接用-lt-script-gt-引入代码实现<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" co...

发则韩

4067人浏览 · 2019-06-14 16:22:43

发则韩 · 2019-06-14 16:22:43 发布

下载vue.js的网址为：https://cn.vuejs.org/v2/guide/installation.html#直接用-lt-script-gt-引入

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue学习</title>
    <!-- 这里是直接引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
    <!-- 这里是引入本地的 -->
    <!--<script src="./vue.js"></script>-->
</head>
<body>
    <div id="app">
        <!-- {{content}}<br/> -->
        <h1>实现待办事项功能</h1>
        <!-- v-model是一个指令，来对input标签里的数据进行绑定，
            限制在<input>、<select>、<textarea>、components中使用 -->
        输入未完成的事项:<input type="text" v-model="thing">
        <button type="submit"  @click=add()>确定</button>
        <h2>待办事项</h2>
        <ul>
            <!-- v-for 用于循环待办事项数组 其中item代表每条事项，index代表数组索引(0开始) -->
            <li v-for='(item,index) in todo'>
                <!-- <span>{{item}}:{{index}}</span> -->
                <span>{{item}}</span>
                <button type="submit" @click=finish(index)>完成</button>
                <button type="submit" @click=deleteTodo(index)>删除</button>
            </li>
        </ul>
        <h2>完成事项</h2>
        <ul>
            <!-- v-for 用于循环完成事项数组 其中item代表每条事项，index代表数组索引(0开始) -->
            <li v-for='(item,index) in finished'>
                <span>{{item}}</span>
                <button type="submit" @click=changeTodo(index)>未完成</button>
                <button type="submit" @click=deleteFinished(index)>删除</button>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                content:"hello vue",
                thing:'', //v-model绑定
                todo:[],
                finished:[]
            },
            methods:{
                // 将input标签里的内容加入到todo(待办事项数组)
                add(){
                   this.todo.push(this.thing);
                   this.thing='';
                },
                // 将待办事项里完成的加入到finished(完成事项数组)
                finish(index){
                    // console.log(1);
                    this.finished.push(this.todo[index]);
                    // 数组.splice(index,howmany)方法 
                    // index代表此项目位置(即在数组中的索引) howmany代表从此位置开始删除多少个
                    this.todo.splice(index,1);
                },
                // 将完成事项改成待办事项
                changeTodo(index){
                    this.todo.push(this.finished[index]);
                    this.finished.splice(index,1);
                },
                // 对待办事项删除
                deleteTodo(index){
                    this.todo.splice(index,1);
                },
                // 对完成事项删除
                deleteFinished(index){
                    this.finished.splice(index,1);
                }
            }
        })
    </script>
</body>
</html>

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}$/, //不连续的两位字母// /^