vue.jsでdomノードを削除する方法

Vue.js の dom ノード削除方法: 1. v-for で dom ノードをループし、各 li に削除ボタンがあることを確認し、削除イベントをバインドします; 2. [this.datahistory などの dom ノードを削除します。 .splice(this.$refs.li[インデックス], 1)]。

#この記事の動作環境: Windows10 システム、vue.js 2.9、thinkpad t480 コンピューター。

Vue は現在の dom ノードを削除するために 2 つの手順を実行する必要があります:

最初の手順: v-for は dom ノードをループし、各 li に削除ボタンがあり、削除をバインドします。イベント

      <ul>
        <li ref="li" v-for="(item, index) in datahistory" :key="index">
        	{{item}}
        	<button @click="deleteFn">删除</button>
        </li>
      </ul>

ステップ 2: dom ノードの削除

deleteFn () {
        this.datahistory.splice(this.$refs.li[index], 1) 
        // 点击调用删除方法，在datahistory数组里删除index这个下标项，逗号后面的1就代表删除当前的1项
      }

推奨される学習:

php トレーニング

以上がvue.jsでdomノードを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。