zoukankan      html  css  js  c++  java
  • todolist案例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 导入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <!-- 定义标签 -->
    <div id="app">
    <span>{{message}}</span>
    <input type="text" name="todoitem" v-model="newitem"> <button @click="add">添加</button>
    <hr>
    <ul>
    <li v-for="(item,index) in items">
    <a href="javascript:;" @click="up(index)">↑</a> {{item}} <a href="javascript:;" @click="deleteitem(index)">删除</a> <a href="javascript:;" @click="down(index)">↓</a>
    </li>
    </ul>
    </div>

    </body>
    <!-- 初始化vue -->
    <script type="text/javascript">
    var vm = new Vue({
    // el 接管 html
    el:'#app',
    //data 绑定数据
    data:{
    message:'hello ',
    items: ['学习html','学习python','mysql'],
    newitem:''
    },
    // 绑定的事件
    methods:{
    add:function(){
    this.items.push(this.newitem);
    this.newitem='';
    },
    deleteitem:function(index){
    // alert(index)
    this.items.splice(index, 1);
    },
    up:function(index){
    // 1.获取当前的元素
    current=this.items[index]
    // 2.先把当前的元素删除
    this.items.splice(index, 1)
    // 3.再添加,添加的时候让它的索引-1
    this.items.splice(index-1, 0,current)
    },
    down:function(index){
    // 1.获取当前的元素
    current=this.items[index]
    // 2.先把当前的元素删除
    this.items.splice(index, 1)
    // 3.再添加,添加的时候让它的索引+1
    this.items.splice(index+1, 0,current)
    }
    }
    })
    </script>
    </html>
  • 相关阅读:
    JSP 使用
    Spring MVC 读取静态资源时404错误
    Java及Android开发环境搭建
    堆和栈的区别
    fork Bomb
    Hbase Shell常用命令
    CSS选择器的系统介绍
    JavaScript中的位置坐标
    JavaScript事件
    战略型、战术型
  • 原文地址:https://www.cnblogs.com/zhang-da/p/14483718.html
Copyright © 2011-2022 走看看