建手机网站的必要性,望野王绩拼音版,网站开发项目实战,在线服装设计网站点击master Vue!删除后该list后输入框中的Jerry消失了 原因#xff1a;vue当你更改元素时会在真实的dom中渲染并更新list。这两个goal是两个dom元素,触发点击事件后,vue并不会删除第一个dom元素,而是把第二个dom元素的动态内容({{ goal }} - {{ index }})复制到第一个dom元素… 点击master Vue!删除后该list后输入框中的Jerry消失了 原因vue当你更改元素时会在真实的dom中渲染并更新list。这两个goal是两个dom元素,触发点击事件后,vue并不会删除第一个dom元素,而是把第二个dom元素的动态内容({{ goal }} - {{ index }})复制到第一个dom元素中,input元素仍然是老元素。 bodyheaderh1Vue Course Goals/h1/headersection iduser-goalsh2My course goals/h2input typetext v-modelenteredGoalValue /button clickaddGoalAdd Goal/buttonp v-ifgoals.length 0No goals have been added yet - please start adding some!/pul v-elseliv-for(goal, index) in goalsclickremoveGoal(index){{ goal }} - {{ index }}input typetext click.stop //li/ul/section/body /htmlconst app Vue.createApp({data() {return {enteredGoalValue: ,goals: [],};},methods: {addGoal() {this.goals.push(this.enteredGoalValue);},removeGoal(idx) {this.goals.splice(idx, 1);},}, });app.mount(#user-goals);为此引入key属性可以在所有带有v-for的html标签使用就像是id给每个li添加不同的key属性,用来告知vue区分不同的li这样做可以保证input中的内容不会丢失。 liv-for(goal, index) in goals:keygoalclickremoveGoal(index)