美文网首页
Vue动态添加控件

Vue动态添加控件

作者: 高调的小丑 | 来源:发表于2018-07-26 19:32 被阅读359次

废话不多说,直接上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>VueLearn</title>
    //引用外部vue
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ title }}</p>
        <ul>
            <div>
                <input type="text" v-model="city">
                <input type="text" v-model="name">
                <button @click='handleClick'>添加</button>
            </div>
        </ul>
        <ul v-for="info in myInfo">
            <input type="text" v-model="info.city" disabled readonly>
            <input type="text" v-model="info.name" disabled readonly>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: '测试动态添加',
                city: '',
                name: '',
                info: '',
                myInfo: []
            },
            mounted: function () {
                this.getInfo();
            },
            methods: {
                getInfo(){
                    this.info='[{"city":"curry","name":"我是盐城人"}]';
                    this.myInfo=JSON.parse(this.info);
                },
                handleClick() {
                    var str = {
                        city: this.city,
                        name: this.name
                    };
                    this.myInfo.push(str);

                    this.city = "";
                    this.name = "";
                    var str = JSON.stringify(this.myInfo);
                    console.log(str);
                }
            }
        })
    </script>
</body>

</html>

代码里还包含了获取数据转JSON对象和JSON对象转字符串打印出来的动作。

相关文章

网友评论

      本文标题:Vue动态添加控件

      本文链接:https://www.haomeiwen.com/subject/nncimftx.html