vue.js が dom を操作する方法

Vue.js の dom 操作方法: 1. ネイティブ js で dom を操作します、コードは [const dom = getElementById('box')]; 2. vue 公式メソッド ref を使用します、コードは [< div クラス =“set” ref =“up”>]。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6、DELL G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

【おすすめ関連記事：vue.js】

vue.jsによるdomの操作方法：

1. ネイティブ js 操作 dom

const dom = getElementById(‘box')

2. Vue 公式メソッド: ref

vue の ref は、「現在の dom 要素を抽出する」ことです。 " "出てきてください。#

< div class=“set” ref=“up”>

を取得するには this.$refs を渡すだけです。set は操作したい dom オブジェクトであり、その ref は up

@click=“Alert”

です要素にはクリック イベントがあります。

次はこのメソッドを書きましょう

methods:{
  this.$refs.addAlert.style.display = “block”;
}

まだ CSS が必要ですか?

それでは、すべてのコードをここに貼り付けますので、ご自身の目で確認してください

<template>
    <div id="app">
        <div class="index-box">
            <!--新增按钮-->
            <input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
            <!--新增数据源弹框-->
            <div class="addDbSource-alert" ref="addAlert">
                <div class="addAlert-top">
                    <!--添加数据源-->
                    <input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
                </div>
                <div class="addAlert-content">
                    <div style="height: 1000px;"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Index",
        data(){
            return {
            }
        },
        methods:{
            // 点击新增按钮，弹出新增数据源的弹框
            showAddAlert(){
                this.$refs.addAlert.style.display = "block";
            },
            // 点击 × 关闭新增数据源的弹框
            closeAddAlert(){
                this.$refs.addAlert.style.display = "none";
            },
        },
        created(){
        }
    }
</script>
<style scoped>
    #app{
        width:100%;
        height:100%;
        overflow-y:auto;
    }
    /* 容器 */
 .index-box{
  width: 100%;
  height: 100%;
  background: #212224;
  display: flex;
 }
 /* 添加数据源按钮 */
 #DbManagement-addBtn {
  width: 100px;
  height: 45px;
  border: none;
  border-radius: 10px;
  background: rgba(29, 211, 211, 1);
  box-shadow: 2px 2px 1px #014378;
  margin-left: 20px;
  margin-top: 17px;
  cursor: pointer;
  font-size: 20px;
 }
 /*新增数据源弹框*/
 .addDbSource-alert{
  position: fixed;
        top:0;left:0;right:0;bottom:0;
        margin:auto;
  width: 4rem;height: 4rem;
  background: #2b2c2f;
  display: none;
 }
 /*新增弹框头部*/
 .addAlert-top{
  width: 100%;
  height: 50px;
  background: #1dd3d3;
  line-height: 50px;
  font-size: 20px;
  box-sizing: border-box;
  padding-left: 20px;
 }
 /*新增弹框关闭*/
 .addAlert-close{
  background: #1dd3d3;
  border: none;
  font-size: 30px;
  cursor: pointer;
  float: right;
  margin-right: 20px;
  margin-top: 5px;
 }
 /*新增弹框内容部分*/
 .addAlert-content{
  width: 100%;
  box-sizing: border-box;
  padding: 0px 30px 20px;
 }
 /* 滚动条效果 */
 /* 设置滚动条的样式 */
 .addAlert-content::-webkit-scrollbar {
  width: 5px;
 }
 /* 滚动槽 */
 .addAlert-content::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px rgba(40, 42, 44, 1);
  border-radius: 10px; */
 }
 /* 滚动条滑块 */
 .addAlert-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(29, 211, 211, 1);
  /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
 }
 .addAlert-content::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(29, 211, 211, 1);
 }
</style>

テキストとスクリプトを合わせたよりも多くの CSS があります。CSS を理解できるのであれば、そうする理由はありません。 ref

3 番目の方法もあります。jQuery で dom を操作します。これを読んだ後は、あえて使用しません。

3. jQuery で dom を操作します

jQuery ツールのオプションを使用し、操作する対応する dom を選択するだけですが、jQuery がページ上のすべての要素を見つけるために要素を取得することは誰もが知っています。これは、必要なdomは見つかりますが、vueは単一ページなので、jQueryはVueの現在のページを取得するだけではなく、ルートルートから全検索してdomを取得し、同じ要素が他のページに出現した場合も取得してしまいます。 , jQueryで操作するdomを動的に取得したデータを元にレンダリングする場合、mountedメソッドに書かれた操作が無効になるためupdateに配置する必要があり、一部の操作が複数回実行されることになるため、やはり推奨できませんVue で jQuery を使用するには。

関連する無料学習の推奨事項: JavaScript 学習チュートリアル

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