使用Vue做一個簡單的todo應用的三種方式的示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:06:06

使用Vue做一個簡單的todo應用的三種方式的示例代碼

使用Vue做一個簡單的todo應用的三種方式的示例代碼:1. 引用vue.js <!DOCTYPE html> <html> <head> <script src=http://vuejs.org/js/vue.js></script> <meta charset=utf-8> <title>JS Bin</ti

推薦度：

點擊下載本文 文檔為doc格式

導讀使用Vue做一個簡單的todo應用的三種方式的示例代碼:1. 引用vue.js <!DOCTYPE html> <html> <head> <script src=http://vuejs.org/js/vue.js></script> <meta charset=utf-8> <title>JS Bin</ti

1. 引用vue.js

<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>
 <div id="root">
 <input type="text" v-model="inputValue">
 <button @click="handlerAdd">提交</button>
 <ul>
 <li 
 v-for="(item,index) of lists" 
 :key="index" 
 @click="handlerDel(index)"
 >
 {{item}}
 </li>
 </ul>
 </div>
 
 <script>
 new Vue({
 el: '#root',
 data: {
 inputValue: '',
 lists: []
 },
 methods: {
 handlerAdd: function() {
 this.lists.push(this.inputValue);
 this.inputValue = '';
 },
 handlerDel: function(index) {
 this.lists.splice(index, 1);
 }
 }
 });
 </script>
</body>
</html>

2. 全局組件注冊

<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>
 <div id="root">
 <input type="text" v-model="inputValue">
 <button @click="handlerAdd">提交</button>
 <ul>
 <todo-item
 v-for="(item,index) of lists"
 :content = "item"
 :index = "index"
 :key = "index"
 @delete="handlerDel"
 >
 </todo-item>
 </ul>
 </div>
 
 <script>
 Vue.component('todoItem', {
 props: {
 content: String,
 index: Number
 },
 template: '<li @click="handlerClick">{{content}}</li>',
 methods: {
 handlerClick: function(){
 this.$emit('delete', this.index);
 }
 }

 });

 new Vue({
 el: '#root',
 data: {
 inputValue: '' ,
 lists: []
 },
 methods: {
 handlerAdd: function() {
 this.lists.push(this.inputValue);
 this.inputValue = '';
 },
 handlerDel: function(index) {
 this.lists.splice(index,1);
 }
 }
 });
 </script>
</body>
</html>

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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用Vue做一個簡單的todo應用的三種方式的示例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法 VUE 代碼

熱門焦點

使用Vue做一個簡單的todo應用的三種方式的示例代碼

使用Vue做一個簡單的todo應用的三種方式的示例代碼

使用Vue做一個簡單的todo應用的三種方式的示例代碼

最新推薦

猜你喜歡

熱門推薦