Vue 练习 Demo(一): 动态添加元素到页面

新建一个 index.html 文件,然后完成以下初步编辑

<div id="app">
    <input v-model="inputValue" type="text" />
    <button v-on:click="handleAddBtn">提交</button>
    <ul>
        <li v-for="item in list">{{ item }}</li>
    </ul>
</div>

通过 script 标签引入 Vue

<script src="https://cdn.staticfile.org/vue/2.6.2/vue.js"></script>

编辑 js 内容

let app = new Vue({
    el: '#app',
    data: {
        list: ['1', '2'],   // 初识值, 也可以不填
        inputValue: ''      // 和 input 的 inputValue 双向绑定
    },
    methods: {
            // 添加事件
        handleAddBtn() {
            this.list.push(this.inputValue)
            this.inputValue = ''
        }
    },
})

效果展示

效果展示

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 10,780评论 0 33
  • 一、项目环境准备 在开发之前,我们需要安装 Node.js 和 Git,然后注册一个 GitHub 账号用来存放我...
    LK30265阅读 275评论 0 2
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 1,245评论 1 3
  • 一、技术准备 二、开发工具 三、使用 vue-cli 快速开始模板项目 四、给项目添加组件 五、使用vue-rou...
    35eeabfa0772阅读 30,873评论 5 60
  • 文章目录:一、技术准备二、开发工具三、使用 vue-cli 快速开始模板项目四、给项目添加组件五、使用vue-ro...
    小丶侯阅读 1,863评论 2 15