<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            #lb{

                list-style: none;

            }

            #lb li{

                position: relative;

                border-bottom: 1px solid black;

                width: 200px;

                height: 50px;

                line-height: 50px;

            }

            #xh{

                background-color: orange;

                padding: 10px;

                margin-right: 10px;

            }

            #qc{

                position: absolute;

                right: 0px;

                background-color: antiquewhite;

                padding: 2px;

                height: 30px;

                line-height: 30px;

            }

        </style>

    </head>

    <body>

        <!-- 新增（1、生成列表结构  v-for  和数组   2、获取用户输入  v-model   3、回车，新增数据 v-on .enter）

        --删除（数据改变和数据绑定的元素是同步变化的；时间的自定义参数；splice方法的应用）

        ---计数（统计信息个数length）

        --清除(点击清除所有信息  v-on)

        ---隐藏 (没有数据时隐藏  v-if  v-show)

         -->

        <h2>记事本</h2>

        <header id="top">

            <input type="text" v-model="mrvalue" @keyup.enter="add"/>

            <ul id="lb">

                <!-- v-for循环列出列表 -->

                <li v-for="(item,index) in list">

                    <!-- 前面的序号 -->

                    <span id="xh">{{index+1}}</span>

                    <!-- 列表内容 -->

                    <span>{{item}}</span>

                    <!-- 关闭按钮 -->

                    <!-- 添加点击移除事件，要传形参 -->

                    <span id="qc" @click="remove(index)">X</span>

                </li>

                <!-- v-指令   当不等于0时显示 -->

                <span v-if="list.length!=0">

                    {{list.length}}

                </span>

                <!-- v-show指令   当不等于0时显示 -->

                <button @click="clear" v-show="list.length!=0">clear</button>

            </ul>

        </header>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            var top= new Vue({

                el:"#top",

                data:{

                    list:["学习","吃饭","睡觉"],

                    mrvalue:"好好学习，天天向上"

                },

               methods:{

                   // 输入添加

                   add:function(){

                       this.list.push(this.mrvalue);

                   },

                   // 将索引传递过来

                   remove:function(index ){

                       // console.log("删除");

                       // console.log(index);

                       // 按照索引删除

                       this.list.splice(index,1);

                   },

                   clear:function(){

                       this.list=[];

                   }

               }

            })

        </script>

        <!--

        总结：

         列表结构可以通过v-for 指令结合数据data获取

         v-on 结合事件修饰符可以对使劲按进行限制，比如.enter

         v-on 在绑定事件时可以传递自定义参数

         通过v-model 可以快速的设置和获取表单元素的值

         基于数据的开发方式

         -->

    </body>

</html>

效果图

vue.js中 v-for,v-on,v-model,结合应用案例---记事本的更多相关文章

  1. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  2. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  3. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  4. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  5. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  6. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  7. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

  8. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  9. angular.js和vue.js中实现函数去抖（debounce）

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  10. vue.js 中使用（...）运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

随机推荐

  1. OSCP Learning Notes - Enumeration(2)

    HTTP Enumeration Target Host IP: 10.0.0.20 Brute Forcing using DirBuster 1. Start the dirbuster and ...

  2. mybatis逆向工程生成java代码和xml配置

    mybatis官方提供了一个逆向工程包,可以针对数据库表自动生成mybatis执行所需要的Pojo.Mapper xml文件.Mapper 接口文件. mybatis-generator有很多种用法: ...

  3. LGV定理

    LGV定理用于解决路径不相交问题. 定理 有 \(n\) 个起点 \(1, 2, 3, ..., n\),它们 分别对应 要到 \(n\) 个终点 \(A, B, C, ..., X\),并且要求路径 ...

  4. menu目录下的navigation.xml

    <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http:// ...

  5. 大数据（hadoop）

    大数据 一.概述 二.大数据特点 三.大数据部门组织结构 hadoop框架 一.hadoop是什么 Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 主要解决,海量数据的存储和海量数 ...

  6. Maven中出现Could not find artifact ...:pom:0.0.1-SNAPSHOT

    参考链接:https://blog.csdn.net/zpwggi123/article/details/87189959 多模块项目构建时,先将总项目install,之后子项目分别install,注 ...

  7. Python重命名和删除文件

    Python重命名和删除文件: rename(当前的文件名,新文件名): 将当前的文件名修改为新文件名 程序: # os.rename('旧名字',’新名字‘) import os os.rename ...

  8. 在sharepoint 2010创建级联下拉菜单

    SPServices是一个jQuery库,它提取SharePoint Web服务,并使其更容易使用.它可以使用不同的Web服务操作提供更有用且很酷的功能.它完全安装在客户端,不需要服务器. 用SPSe ...

  9. PHP array_replace_recursive() 函数

    实例 递归地使用第二个数组($a2)的值替换第一个数组($a1)的值: <?php$a1=array("a"=>array("red")," ...

  10. asp.net mvc 模拟百度搜索

    页面代码: <td><span>*</span>车牌号码:</td> <td> <div id="search"& ...