[Vue.js]简易输入框测试

    
    
    
    



加入列表

    
hello world
    
{{goal}}

* {
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
}

"use strict";

// let input = document.querySelector("input");
// let btn = document.querySelector("button");
// let ul = document.querySelector("ul");
// btn.addEventListener("click", function () {
//     let v = input.value;
//     if (v !== "") {
//         let liTmp = document.createElement("li");
//         liTmp.textContent = v;
//         ul.appendChild(liTmp);
//         input.value = "";
//     }
// });
// input.onkeydown = function (e) {
//     // if(e.keyCode===13){         已经弃用
//     if (e.key === "Enter") {
//         let v = input.value;
//         if (v !== "") {
//             let liTmp = document.createElement("li");
//             liTmp.textContent = v;
//             ul.appendChild(liTmp);
//             input.value = "";
//         }
//     }
// }
Vue.createApp({
    data(){
        return{
            goals:[],
            enteredValue:""
        };
    },
    methods:{
        addGoal(){
            if(this.enteredValue!==""){
                this.goals.push(this.enteredValue);
                this.enteredValue="";
            }
        }
    }
}).mount("body");