Vue todo list——简单实现

最新推荐文章于 2022-05-04 06:45:00 发布

Katle

最新推荐文章于 2022-05-04 06:45:00 发布

阅读量173

点赞数

分类专栏： Vue技术栈文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_41096610/article/details/103789397

版权

Vue技术栈专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue todo list 案例

废话不多说，整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is a vue todo list</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="text"><!--双向数据绑定-->
    <button type="button" @click="add">增加</button>
    <ul>
      <li v-for="item in list">
        <p>
          {{item.text}}
          <button type="button" @click="dele(item)" >删除</button>
        </p>
      </li>
    </ul>
  </div>

</body>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el:"#app",
    data:{
      text:' ',
      list:[
        {text:'kate1'},
        {text:'kate2'},
        {text:'kate3'},
        {text:'kate4'},
        {text:'kate5'}
      ]
    },
    methods:{
      add:function (){
        if(!this.text.replace(/\s/g,'')){
          alert("请输入内容")
        }
        this.list.push({text:this.text})
        this.test=''
      },
      dele:function (item) {
        this.list.splice(this.list.indexOf(item),1)
      }
    }
  })

</script>
</html>

在这里插入图片描述
使用vue框架，首先引入vue：，在编辑好的HTML中，引用 v-for 指令基于一个数组来渲染一个列表，在定义方法，对数据进行操作，简单易理解，值得一提的是，在命名中，刚开始定义删除的方法名为delete，但一直报错，原来这是js里的专用，改了后删除功能正常。