Make a task plan list with vue

This is a task schedule written according to the video of Mr. Qianfeng Kerwin, written in vue2, the software uses vscode, see the link for detailed video resources

First introduce the vue address

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>

Open the basic data displayed on the page

  data:{
       datalist:["1111","2222","3333"],
       mytext:"aaaa"
  },

Realize the effect:

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>
</head>
<body>
    <div id="box">
        <input type ="text" v-model="mytext">
        {
   
   {mytext}}
        <button @click="handleAdd()">add</button>
        <ul v-show="datalist.length">
            <li v-for="(data,index) in datalist">
                {
   
   {data}}
                <button @click="handleDel(index)">del</button>
            </li>
        </ul>
        <div v-show="!datalist.length">代办事项空空如也</div>

    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                datalist:["1111","2222","3333"],
                mytext:"aaaa"
            },
            methods:{
                handleAdd(){
                    //console.log("获取value值",this.mytext)
                    this.datalist.push(this.mytext)
                    //清空
                    this.mytext = ""
                },
                handleDel(index){
                    console.log("del",index)
                    this.datalist.splice(index,1)
                }
            }
        })
    </script>
</body>
</html>

This is the learning imitation code, refer to the video written by Mr. Qianfeng kerwin, the link is: [Qianfeng web front-end development project tutorial_1000 episodes from zero basic introduction HTML5+CSS3+JS to proficiency (data includes front-end learning roadmap)-beep Bilibili] https://b23.tv/dJqyfv1

Make a task plan list with vue

Guess you like