<!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. Oracle版本发布规划 (文档 ID 742060.1)

    Oracle Database Release Schedule of Current Database Releases (文档 ID 742060.1) Oracle Database RoadM ...

  2. 一张图就可以完美解决Java面试频次最高、GG最高的题目！快点收藏

    如果要问Java面试频次最高的题目,那么我想应该是HashMap相关了. 提到HahMap,必然会问到是否线程安全?然后牵扯出ConcurrentHashMap等,接着提及1.7和1.8实现上的区分, ...

  3. 牛客练习赛 66B题解

    前言 当初思路 开始没想到异或这么多的性质,于是认为对于每个点\(u\),可以和它连边的点\(v\)的点权 \(a_v=a_u \oplus k\)(证明:\(\because\) \(a_u\opl ...

  4. 如何将 Bitbucket 的 pull request 签出到本地 review

    将 pull request 签出到本地进行 review, 最大的好处是可以通过 IDE 来查找各种变量和方法的上下文引用,以便充分发挥我们杠精的本领,将 pull request 中的各种合理和不 ...

  5. python环境搭建及配置

    我选择的是pycharm,这个对新手比较友好 我目前正在自学周志华的西瓜书,在做练习题3.3时需要用到python来实现,做这个练习需要numpy库和matplot库,最开始的时候忘了anaconda ...

  6. 通过cmd进入指定D盘下的某个文件夹

    有时候我们在使用电脑的时候,想使用cmd命令提示符,进入d盘,怎么操作呢,下面来分享一下方法 案例描述:如果进入D盘下的test文件夹(D:\test) 1.win10系统环境下,点击搜索输入[cmd ...

  7. Java程序斗地主发牌代码，List、Map集合的应用

    Java集合存储的灵活运用List集合存储 54个编号 Map <key,value> key 对应的是编号 , value 是 牌的花色(红方梅黑)+ 具体的一张牌 ,比如 黑桃2 用2 ...

  8. freeRTOS内核学习笔记(1)-编程标准

    在开始具体的学习之前,你应该先了解freeRTOS的编程标准.这能够方便你在接下来的阅读中快速的了解一些内容 的基本信息,并方便记忆.此外,良好的编程风格也是工作效率的保障. 你可以在https:// ...

  9. C++ 第三天 Vector、函数

    1.Vector vector是一个动态增长的数组,它会随着我们添加的内容,会逐步的增加空间.实际上它并不是在原来的地方追加空间,而是开辟新的空间,然后把原来的数据都拷贝到新的空间里面去,接着让容器指 ...

  10. Codeforces Round #654 (Div. 2) A~E 题解

    LINK:CF R 654 div2 前言:F题是一个线段树分类讨论的题目 比赛的时候没看 赛后感觉没什么意思 所以咕掉了. 记事:第一次笼统的写一场比赛的题目 可能是我这场比赛打的太差了 题目不难 ...