Vue簡單to do list的刪除功能
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<script src="https://creative.chat/resources/vue/vue-v2.6.12.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content', 'index'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function() {
this.$emit('delete', this.index)
}
}
})
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index) {
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
```
- 前端開發概要
- Vue
- Vue.js
- Vue的模板
- Vue的屬性綁定和雙向數據綁定
- Vue的計算屬性和偵聽器
- v-show和v-if
- Vue簡單to do list
- Vue簡單to do list組件拆分
- Vue簡單to do list組件和實例
- Vue簡單to do list的刪除功能
- Vue的點擊事件，側重操作數據
- vue中定時器設置和關閉頁面時關閉定時器
- axios
- Vue Element-ui
- HTML轉Vue
- Vue3
- Vue開發簡易權限認證
- demo
- Vue常用命令
- Vue項目1
- 前端面試
- 算法題
- Vue框架原理
- 前端基礎
- 安全
- 模擬面試一面
- JavaScript和MySQL
- JavaScript和Redis
- HTML+CSS入門到案例
- 無限級導航欄案例開發
- iframe嵌套網頁全屏顯示
- CSS定位顯示圖片不同部分
- Select option 跳轉
- 網頁顯示JavaScript
- 簡單文本編輯器
- 用純js實現一個文本編輯器
- 視頻，音頻
- frame包住目標網站
- Web重定向
- HCJ
- HTML
- CSS
- jQuery
- Bootstrap
- CSS實例
- 【CSS3】8款好看的純CSS3搜索框
- 小工具
- menu_icon
- JavaScript
- JS獲取屏幕尺寸
- JavaScript簡易錄播圖
- 預設select option的值
- HTML和CSS基礎
- APP開發
- uni-app
- nw.js
- CSS基礎
- CSS hover 菜單
- CSS Menu
- CSS Menu 2
- Bootsrtap
- 圖片展示
- 固定topbar
- JavaScript
- 當前頁select option value跳轉頁面
- JavaScript點擊一級菜單打開和關閉二級菜單
- JavaScript json無限分級導航菜單
- JavaScript獲取url
- 其他
- JS獲取復選框中當前選中的值
- JS array 遍歷
- JavaScript無刷新修改url
- localStorage
- js版的in_array的實現方法
- JavaScript修改URL參數
- JSON
- jQuery教程
- 用PHP+MySQL+jQuery+Ajax拖放排序修改數據庫
- jQuery實例
- jQuery
- jQuery實例1
- jQuery slider實例
- jQuery加載更多功能
- jQuery前后元素移動
- datatables前端搜索功能
- jQuery select value跳轉頁面
- jQuery局部刷新
- jQuery點擊自身以外關閉彈出窗
- 點擊增加class
- 點擊增加和刪除class
- 固定向右menu
- jQuery多級menu
- 用Jquery和Json實現多語言切換
- jQuery to do list
- jQuery slideToggle
- jQuery點擊顯示和隱藏CSS
- js如何獲取點擊標簽里的值
- JavaScript和JQuery獲取DIV的值
- jQuery加載公用文件
- createElement添加內容
- createElement添加內容 - 復制案例
- jQuery 遍歷案例
- HBuilder
- 案例
- Slider
- html5 video
- Ajax
- Ajax案例1： 無優化XMLHttpRequest
- Ajax案例2： json的XMLHttpRequest
- Ajax案例3： jQuery json的XMLHttpRequest
- Ajax案例4： H5 jQuery的XMLHttpRequest
- Ajax案例5：無跳轉刷新容器獲取外部內容
- Ajax搜索
- 兩種Ajax獲取數據方式
- Cookie
- 微信小程序
- 基礎的GET和POST頁面
- Node.js
- AngularJS
- AngularJS案例
- AngularJS案例1
- ReactJS
- React native
- API
- Postman API
- Web前端常用圖標
- Photoshop
- 前端cnd
- 前端工具
- 前端模板
- Export data
- 前端工程化
- 固定菜單
- 404頁面
- test
- JavaScript框架
- 瀏覽器兼容性