<!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. Python Ethical Hacking - MAC Address & How to Change(3)

    SIMPLE ALGORITHM Goal  -> Check if MAC address was changed. Steps: 1. Execute and read ifconfig. ...

  2. Python Ethical Hacking - BACKDOORS(4)

    REVERSE_BACKDOOR - cd command Access file system: cd command changes current working directory. It h ...

  3. node name配置错误，导致grid日志在报警

    [root@aipdb ContentsXML]# cat inventory.xml <?xml version="1.0" standalone="yes&qu ...

  4. javascript原型：写一个合并后数组去掉同类项的方法

    <!DOCTYPE html> <html> <head> <title>test013_Array_prototype_unique()</ti ...

  5. mysqldump导出表结构及数据

    问题描述:有需要mysql某几张表的需求,某个数据库某几张表,导出先检查相应的数据库和表是否存在 数据泵用法:默认导出的是表结构以及表中的数据 mysqldump -uroot -p -S /data ...

  6. JavaScript以万或亿为单位显示，并保留两位小数或取整

    //单位:万 n = 814308678.00; n = Math.floor((n /10000) * 100) / 100; //保留小数点两位 //n = parseInt((n /10000) ...

  7. python中if及if-else如何使用

    if 结构 if 结构允许程序做出选择,并根据不同的情况执行不同的操作 基本用法 比较运算符 根据 PEP 8 标准,比较运算符两侧应该各有一个空格,比如:5 == 3. PEP8 标准 ==(相等) ...

  8. 细说websocket快速重连机制

    文|马莹莹 网易智慧企业web前端开发工程师 引言 在一个完善的即时通讯应用中,websocket是极其关键的一环,它为web应用的客户端和服务端提供了一种全双工的通信机制,但由于它本身以及其底层依赖 ...

  9. git 缓存密码 unable to access... 403错误

    如果输入了 git config credential.helper 命令之后还是出现了osxkeychain, store 或者 cache 等,说明 git 的配置还是没有被清空,我参考了stac ...

  10. 第三节：Centos下安装Mysql5.6数据库

    1.下载mysql5.6版本 [官网-需要什么版本自己去找]https://dev.mysql.com/downloads/mysql/5.6.html [版本]linux通用 cd /usr/loc ...