1.vue


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
   <div id="app">
        <input type="text" v-model="type">
        <div v-if="type === 'a'">a</div>
        <div v-else-if="type === 'b'">b</div>
        <div v-else>anyone</div>
    </div> 
</body>
<script>
     var app = new Vue({
         el: '#app',
        data: {
            type: '',
        },
         methods: {
         }
    })
</script>
</html>

VUE 用数据通行实现,v-if利用样式disblock:none；实现A,B,C的展示。

2.原生js部分

**个人思路：利用键盘事件监听 input 框的内容,判断里面input框里面的值和标签内的值做判断，实现效果 **

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .show {
            display: block !important;
        }

        .none {
            display: none;
        }
    </style>
</head>
<body>
    <input type="text" onkeyup="keydown()">
    <div class="none">1</div>
    <div class="none">2</div>
    <div class="none">3</div>
    <div class="none">4</div>

</body>
<script>
    function keydown() {
        var num = this.window.event.path[0].value;
        var div = document.getElementsByClassName("none");
        for (var i = 0; i < div.length; i++) {
            div[i].classList.remove("show")
        }
        for (var i = 0; i < div.length; i++) {
            if (div[i].innerHTML == num) {
                div[i].classList.add("show")
                return;
            } else {
                i = div.length;
                div[i - 1].classList.add("show")
            }
        }
    }
</script>
</html>

用原生js 实现vue中的，v-if-else

1.vue

VUE 用数据通行实现,v-if利用样式disblock:none；实现A,B,C的展示。

2.原生js部分