Vue 本地应用记事本 v-on v-model v-for使用

新增功能

vue当中如何生成列表结构？使用的指令是v-for，同时要有一个可以生成列表的数据，常用的是数组。记事本里面的内容并不复杂，所以这里使用字符串数组就行了。

获取用户输入的内容使用绑定v-model，双向数据绑定（可以将表单的内容和data当中的数据关联起来，可以非常方便的设置和取值）。这个指令的使用需要在data当中定义绑定的数据，接着将这个指令设置给相应的表单元素就可以了。

回车的时候新增数据，事件绑定v-on，使用回车键那么就是enter。

根据数组生成列表的结构，获取用户输入的内容（其实就是使用v-model进行双向数据绑定）。

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="vue">
        <input type="text" v-model="inputvalue" @keyup.enter="add()">
       <ul >
        <li  v-for="(item,index) in list">{{ index +1 }}.  {{ item }}</li>
       </ul>
    </div>

    <script type="text/javascript">
      new Vue({   
          el: "#vue",   
          data:{ 
             list: ["写代码","吃饭饭","睡觉觉","打游戏"],
             inputvalue: "好好学习"
          },
          methods:{  
            add:function(){
                this.list.push(
                    this.inputvalue
                )
            }
       }
    }
)

    </script>

</body>

</html>

删除

splice可以通过对应的下标来删除指定的元素。这里通过形参的方式传递给函数。

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="vue">
        <input type="text" v-model="inputvalue" @keyup.enter="add()"> <br>
        <input type="text" v-model="arrindex" @keyup.enter="remove(arrindex)">
       <ul >
        <li  v-for="(item,index) in list" @click="remove(index)">{{ index +1 }}.  {{ item }}</li>
       </ul>
    </div>

    <script type="text/javascript">
      new Vue({   
          el: "#vue",   
          data:{ 
             list: ["写代码","吃饭饭","睡觉觉","打游戏"],
             inputvalue: "好好学习",
             arrindex: 1
          },
          methods:{  
            add:function(){
                this.list.push(
                    this.inputvalue
                )
            },
            remove:function(arrindex){
               console.log(arrindex);
               //第一个是索引，第二个参数是一次性删除几个
               this.list.splice(arrindex,1)
            }
       }
    }
)

    </script>

</body>

</html>

Vue 本地应用 记事本 v-on v-model v-for使用

新增功能

删除

Vue 本地应用记事本 v-on v-model v-for使用