列表渲染和事件监听v-on

最新推荐文章于 2022-10-12 17:47:37 发布

草莓味的狮子座leo

最新推荐文章于 2022-10-12 17:47:37 发布

阅读量89

点赞数

分类专栏： Vue.js 文章标签：列表

本文链接：https://blog.csdn.net/Mikon_0703/article/details/111314040

版权

Vue.js 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <div id="app">
        <ul>
            <li v-for='item in list'>{{item}}</li>

        </ul>
        <div>
            <input type="text" v-model='userInput'>
            <span>
                <button type="button" v-on:click='addItem'>add</button>
            </span>


        </div>

    </div>

    <script src="./js/vue.min.js"></script>

    <script>
        var inputValue = ''
        var vue = new Vue({
            el: '#app',
            data: {
                list: ['aaa', 'bbb', 'ccc', 'ddd'],
                userInput: inputValue
            },
            methods: {
                addItem: function() {
                    // alert('ok')
                    this.list.push(this.userInput)
                    this.userInput = ''
                },
            }


        })
    </script>

</body>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

草莓味的狮子座leo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表渲染和事件监听v-on

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div i
复制链接

扫一扫