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>
Copy the codeVUE uses data traffic,v-if uses the style disblock: None; Achieve A,B,C display.
2. Native JS part
** Personal ideas: use keyboard events to listen to the content of the input box, determine the value of the input box inside the value of the label to judge, to achieve the effect **
<! 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> <inputtype="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>
Copy the code