2021-7-6 Vue实现记事本功能 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="newValue" @keyup.enter="add" placeholder="你好">
    <ul>
        <li v-for="(item,index) in list">
        {{index+1}}{{item}}<input type="button" value="删除" @click="remove(index)">
        </li>
    </ul>
    <div v-show="list.length!=0">{{list.length}}<input type="button" value="清空" @click="clearAll"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    list:["你好","哈哈","卧槽"],
    newValue:'好好学习，天天向上',
    index:0
  },
  methods:{
  add:function(){
  this.list.push(this.newValue);
  },
  remove:function(index){
console.log("删除");
  this.list.splice(index,1);
  },
  clearAll:function(){
  this.list=[];
  }
  }
})
</script>
</body>
</html>

 

posted @ 2021-07-01 11:18  月长生  阅读(92)  评论(0)    收藏  举报