vue-慕課-todoList

前言

todoList是一個小的demo,類似於增刪改查。
在這裏插入圖片描述

代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todoList</title>
</head>
<script src="./vue.js"></script>

<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <button value="提交" v-on:click="add">提交</button>

        <li v-for="item in list">{{item}}</li>
    </div>  
</body>

 <script>
    var vue = new Vue({
        el:"#app",
        data:{
            list:[],
            inputValue:''
        },
        methods:{

            add:function(){
                this.list.push(this.inputValue)
                // alert(this.inputValue)
                this.inputValue=''
            }
        }
    })
</script>
 </html>

總結

  1. v-model =" " :雙向綁定,把data中的數據和標籤中的數據綁定
  2. v-for=“item in list” :遍歷data中的list集合,並把每個數據賦值給item
  3. v-on:click=“add” 設置點擊事件,在data中有一個methods字段,裏面添加函數

add:function(){
this.list.push(this.inputValue)
// alert(this.inputValue)
this.inputValue=’’
}


你眼裏的星辰大海,是我從未見過的皓月明空。


發佈了70 篇原創文章 · 獲贊 63 · 訪問量 19萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章