todolist功能开发

最新推荐文章于 2023-02-13 15:20:28 发布

xuxinwen32

最新推荐文章于 2023-02-13 15:20:28 发布

阅读量312

点赞数

分类专栏：前端文章标签： todolist功能开发

本文链接：https://blog.csdn.net/xuxinwen32/article/details/86673801

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if,v-show,v-for指令的使用</title>
    <script src="../2.5.20-vue.js"></script>   <!--//提前加载，避免出现抖屏-->
</head>
<body>

<div id="root">
    <div>
        <input v-model="inputValue" />
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <li v-for="(item, index) of list" :key="index">
            {{item}}
        </li>
    </ul>
</div>

<script>
    new Vue({
        el: '#root',  /**创建vue的实例，接管id等于root的内容*/
        data: {
            inputValue: "",
            list: []
        },
        methods: {
            handleSubmit(){
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        }

    })
</script>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xuxinwen32

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
todolist功能开发

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v-if,v-show,v-for指令的使用&lt;/title&gt; &lt;script src="../2.5.20-vue
复制链接

扫一扫