специфический эффект

Пример эффекта

https://coder.itclan.cn/fontend/js/17-yinyong-tongji-elem/

Подробное описание

На веб-страницах родственные (родственные) элементы относятся к элементам, имеющим один и тот же прямой родительский элемент, и часто относятся к элементам одного и того же типа. Подобные элементы часто встречаются в реальной разработке.

Например: список li, параллельные кнопки и т. д. Когда вам нужно создать какие-то специальные эффекты, вы можете выполнить некоторые операции с другими элементами того же уровня, чтобы удовлетворить конкретные требования веб-страницы.

Например: альтернативный цвет заливки строк и т. д.

Собственная реализация метода

Следующее реализовано через собственный js. При нажатии кнопки получается значение кнопки.

// Получить значение родственного элемента кнопки
function getLevelBtnVal(btn) {
    var p = btn.parentNode; // Получите его родительский узел, нажав кнопку
    var children = p.childNodes; // Все дочерние узлы родительского узла можно получить через childNodes.
    
    // Обход дочерних узлов
    for(var i = 0;i<children.length;i++) {
        // Определить узел, который не является текущим узлом, но является узлом того же типа.
        if(children[i] != btn && children[i].nodeType == btn.nodeType) {
            alert(children[i].value); // Появится всплывающее окно со значением другой стороны.
        }
    }
}

Ниже приведен код шаблона HTML.

<p>
    <!---группа кнопок-->
    <input type="button" value="JavaScipt" onclick="getLevelBtnVal(this)" />
    <input type="button" value="HTML" onclick="getLevelBtnVal(this)">
</p>

Детальный анализ

Вышеупомянутые два входа являются родственными элементами. Родственные элементы имеют один и тот же родительский элемент, оба из которых являются p. Тогда вы можете получить родственные элементы, отличные от него. Если вам все еще нужно исключить ту же категорию, вы можете использовать nodeType. атрибуты узла, чтобы различать.

Реализация версии Vue

В Vue нет необходимости использовать собственный js. Вам придется постоянно думать о способах поиска узлов DOM и последующего управления DOM. В Vue данные манипулируются напрямую.

Пример кода для комбинации кнопок, показанной выше, выглядит следующим образом:

<template>
    <div class="wrap">
        <el-radio-group v-model="skillVal" @change="handleRadio">
            <el-radio-button  v-for="(item,index) in lists" :key="index" :label="item">{{item}}</el-radio-button>
       </el-radio-group>
       <div class="content">
          {{content}}
       </div>
    </div>
</template>

<script>
    export default {
        name: "tongjiElem",
        data() {
            return {
                skillVal: 'JavaScript',
                lists: ["JavaScript","HTML","CSS","Vue","React","Angular"],
                content: "JavaScript"
            }
        },

        methods: {
            handleRadio(data) {
                this.content = data;
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrap {
    margin: 20px 0;
}

.content {
    padding: 20px 0 0 0;
}
</style>

Как видно из вышеизложенного, использование Vue для достижения того же эффекта требует всего лишь нескольких строк кода. По сравнению с нативной реализацией js это относительно просто, но все равно необходимо знать работу нативного js.