使用Vue做一个简单的todo应用的三种方式的示例代码

(编辑：jimmy 日期: 2024/11/19 浏览：2)

1. 引用vue.js

<!DOCTYPE html>
<html>
<head>
<script src="/UploadFiles/2021-04-02/vue.js">

2. 全局组件注册


<!DOCTYPE html>
<html>
<head>
<script src="/UploadFiles/2021-04-02/vue.js">

3. vue-cli脚手架


// Todo.Vue

<template>
 <div>
  <input type="text" v-model="inputValue">
  <button @click="handlerAdd">提交</button>
  <ul>
   <todo-item
    v-for="(item,index) of lists"
    :key="index"
    :content="item"
    :index="index"
    @delete="handlerDel"
   ></todo-item>
  </ul>
 </div>
</template>

<script>
import TodoItem from './components/todoItem'

export default {
 data () {
  return {
   inputValue: '',
   lists: []
  }
 },
 methods: {
  handlerAdd () {
   this.lists.push(this.inputValue)
   this.inputValue = ''
  },
  handlerDel (index) {
   this.lists.splice(index, 1)
  }
 },
 components: {
  'todo-item': TodoItem
 }
}
</script>

<style>

</style>
// TodoItem.vue

<template>
 <li @click="handlerClick" class="item">{{content}}</li>
</template>

<script>
export default {
 props: ['content', 'index'],
 methods: {
  handlerClick () {
   this.$emit('delete', this.index)
  }
 }
}
</script>

<style scoped>
 ul,li {
  list-style: none;
 }
 .item {
  color: blueviolet;
 }
</style>



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：详解Axios 如何取消已发送的请求

下一篇：Iview Table组件中各种组件扩展的使用