Vue version of message board-PHP开发-php.cn

Home

php教程

PHP开发

Vue version of message board

高洛峰

Nov 30, 2016 pm 04:48 PM

vue

Use vue to make a small example to consolidate learning.

<body>
<div id="box">
    <input type="text" v-model=&#39;command&#39; @keyup.enter=&#39;add&#39; />
    <div v-show=&#39;list.length==0&#39;>暂无留言</div>
    <ul>
        <li v-for="value in list"track-by=$index>{{value}}
            <a href="javascript:;" @click=&#39;rm($index)&#39;>删除</a>
        </li>
    </ul>
</div>
<script src="libs/vue.js"></script>
<script>
    new Vue({
        el:&#39;#box&#39;,
        data:{
            command:&#39;&#39;,
            list:[]    
        },
        methods:{
            add:function(ev){
                this.list.unshift(this.command)    
                this.command=&#39;&#39;;
            },
            rm:function(index){
                this.list.splice(index,1)    
            }
                               
        }
    })
</script>
</body>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn