Vue.js前端开发 增加Tag标签

intellij idea 前端开发环境搭建|vue前端后端分离开发环境|idea 前端开发环境搭建

html 代码

<script src=”//cdn.bootcss.com/vue/2.1.6/vue.min.js”></script>
<style>
    ul,
    li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tag {
        width: 300px;
        height: 30px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding-left: 5px;
    }
    .btn {
        background-color: #008CFF;
        color: #fff;
        width: 100px;
        height: 32px;
        line-height: 32px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .taglist li {
        float: left;
        padding: 3px 10px;
        background-color: #2ECC71;
        border-radius: 5px;
        color: #fff;
        font-size: 20px;
        margin: 0 10px 0 0;
        cursor: pointer;
    }
</style>
<p style=”font-size:12px;color:#666;line-height:24px;”>
    用Vue.js重写了增加Tag标签的功能,写得比较简单,功能如下:
    <br> Tag不能有重复的,遇到重复输入的Tag,自动忽视。
    <br> 每个Tag做trim处理,不能空格提交。
    <br> 最多允许10个Tag,多于10个时,按照录入的先后顺序,把最前面的删除。
    <br> 点击Tag删除当前。
    <br>
    <br> 如发现问题,或者改进方案,欢迎留言!
    <br>
    <br>
</p>
<div id=”app”>
    <p>Tag:
        <input type=”text” class=”tag” v-model=”tag” />
        <input type=”button” class=”btn” v-on:click=”add” value=”提交” />
    </p>
    <div class=”taglist”>
        <ul>
            <li v-for=”(tag,index) in taglist” v-on:click=”del(index)”>{{tag.tag}}</li>
        </ul>
    </div>
</div>
<script>
    var vm = new Vue({
        el: “#app”,
        data: {
            tag: “”,
            taglist: [
            ]
        },
        methods: {
            add: function () {
                if (!this.tag || this.tag.trim() == “”) {
                    return false;
                }
                if (this.taglist.length > 0) {
                    for (var i in this.taglist) {
                        if (this.taglist[i].tag == this.tag) {
                            return false;
                        }
                    }
                }
                if (this.taglist.length >= 10) {
                    this.taglist.push({ “tag”: this.tag });
                    this.taglist.splice(0, 1);
                    this.tag = “”;
                } else {
                    this.taglist.push({ “tag”: this.tag });
                    this.tag = “”;
                }
            },
            del: function (index) {
                this.taglist.splice(index, 1);
            }
        }
    })
</script>

前端开发环境的跨域|前端本地开发环境搭建|android web前端开发环境搭建

» 本文来自:前端开发者 » 《Vue.js前端开发 增加Tag标签》
» 本文链接地址:https://www.rokub.com/5153.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!