vue框架email如何自动填写后缀

最新推荐文章于 2021-12-20 10:14:39 发布

321yanqing

最新推荐文章于 2021-12-20 10:14:39 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： eamil vue this

本文链接：https://blog.csdn.net/qq_40319828/article/details/82909949

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<script src="vue/dist/vue.js"></script>
<style>
    .v-email{
        width:300px;
        height:300px;
        border:none;
        position: relative;
    }
    .list{
        width:100px;
        height:40px;
        margin-left:10px;
        color:rgb(143, 140, 140); 
        cursor: pointer;
        position:absolute;
    }
    .list .item{
        line-height: 25px;
    }
    .list .item:hover{
       color:rgb(82, 79, 79);
    }
  
</style>
<body>
    <div id="app">
        <div class="v-email">
            <input type="text" v-model="input">
            <div class="list" v-show="input" >
                    <div class="item" @click="input+='@qq.com'">{{input}}@qq.com</div>
                    <div class="item" @click="input+='@qq.com'">{{input}}@126.com</div>
                    <div class="item" @click="input+='@qq.com'">{{input}}@163.com</div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
   Vue.component('my-email',{
        props:["input"],
        template:`
        <div class="email">
           <input type="text" />
        </div>
        `,
        data:function(){
            return {
             em:[
                 "@qq.com",
                 "@126.com",
                 "@163.com"
             ]
            }
        }
    }),
   new Vue({
       el:"#app",
       data:{
           input:"",
       }
   })
</script>

但是有个问题，点击下方会一直添加后缀。

又试了几种办法，还是不能解决，所以换了一种思路

<body>
    <div id="app">
        <div class="v-email">
            <input type="text" v-model="input">
            <div class="list" >
                <div class="item" @click="setInput(mail)"  v-for="mail in emails">{{mail}}</div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
   Vue.component('my-email',{
        props:["input"],
        template:`
        <div class="email">
           <input type="text" />
        </div>
        `,
        data:function(){
            return {
             em:[
                 "@qq.com",
                 "@126.com",
                 "@163.com"
             ]
            }
        }
    }),
   new Vue({
       el:"#app",
       data:{
           input:"",
       },
       methods:{
            setInput(mail){
               this.input = mail;
            }
       },
       computed:{
           emails(){
               if(!this.input) return [];
               if(this.input.indexOf("@")>-1) return [];
               return [
                   this.input+'@qq.com',
                   this.input+'@163.com',
                   this.input+'@126.com'
               ]
           }
       }
   })
</script>

请注意里面的this，通过this才能获取到vue里面定义的变量

321yanqing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue框架email如何自动填写后缀

&lt;script src="vue/dist/vue.js"&gt;&lt;/script&gt;&lt;style&gt; .v-email{ width:300px; height:300px; border:none; position: relative; } .list{ wi...
复制链接

扫一扫