Vue中创建一个隐藏的 <el-input> 控件，但仍然可以使用其值，您可以通过设置 display: none 来隐藏该控件，同时使用 v-model 来绑定输入值

源码资源网

在Vue中创建一个隐藏的 `<el-input>` 控件，但仍然可以使用其值，您可以通过设置 `display: none` 来隐藏该控件，同时使用 `v-model` 来绑定输入值。这样即可隐藏控件，但仍然可以获取和使用其值。以下是一个示例：

1. vue
   
2. 
   
3. <template>
   
4. 
   
5.   <div>
   
6. 
   
7.     <el-input
   
8. 
   
9.       v-model="inputValue"
   
10. 
    
11.       style="display: none;"
    
12. 
    
13.     ></el-input>
    
14. 
    
15.     <button @click="getValue">获取值</button>
    
16. 
    
17.   </div>
    
18. 
    
19. </template>
    
20. 
    
21. <script>
    
22. 
    
23. export default {
    
24. 
    
25.   data() {
    
26. 
    
27.     return {
    
28. 
    
29.       inputValue: ''
    
30. 
    
31.     };
    
32. 
    
33.   },
    
34. 
    
35.   methods: {
    
36. 
    
37.     getValue() {
    
38. 
    
39.       console.log(this.inputValue);
    
40. 
    
41.       // 在这里使用获取到的值进行其他操作
    
42. 
    
43.     }
    
44. 
    
45.   }
    
46. 
    
47. };
    
48. 
    
49. </script>

复制代码

在上面的示例中， `<el-input>` 控件被设置为 `display: none;` ，因此在页面中不可见。但是通过`v-model="inputValue" `，仍然可以将输入的值绑定到` inputValue `变量中。当点击按钮时，调用` getValue `方法可以获取并使用隐藏` <el-input>`控件的值。