qq_40086260
qq_40086260
2019-03-22 15:59

vue中的模板复用问题---什么情况下会模板复用?

20
  • angular.js
  • react.js
  • html5
  • vue.js
  • javascript
    const app=new Vue({
            el:`#app`,
            data:{
                key2:`username`
            },
            methods:{
                changeFun(){
                    this.key2=this.key2==`username`?`email`:`username`
                }
            }
        })
        html:
        <div id='app' v-clock>
        <template v-if='key2==`username`'>
                <label>用户名:</label>
                <input type="" name="" id="user" value="" placeholder="请输入用户名"/>
        </template>
        <template v-else-if='key2==`email`'>
                <label>邮箱:</label>
                <input type="" name="" id="email" value="" placeholder="请输入邮箱"/>
        </template>
        <button @click='changeFun'>点击</button>
    </div>
        这种情况下如果输入用户名user,再点击改变key2的值,这时‘邮箱’的输入框里会保留上一次输入的值user,因为发生了模板复用。
        问题:
        <template v-if='key2==`username`'>
                        <div>
                            <label>用户名:</label>
                            <input type="" name="" id="user" value="" placeholder="请输入用户名"/>
                        </div>  
                    </template>
                    <template v-else-if='key2==`email`'>
                    <div>
                            <label>邮箱:</label>
                            <input type="" name="" id="email" value="" placeholder="请输入邮箱"/>
                            </div>
        </template>
        当我将两个input框用div包裹后,下一次点击不会保留上一次的值,这是什么原因呢?
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

1条回答