如何在VueJS中按条件禁用输入

为了移除disabled属性，我们可以使用VueJS中提供的disabled标签。disabled标签基本上检查布尔值，并决定是否需要显示输入标签。我们在app.js文件中设置其值，并根据切换功能动态更改其值。

要应用:disabled属性，我们首先需要创建一个id为’app’的div元素。一旦创建了div元素，我们可以通过初始化数据内容将disabled属性应用于该元素。

语法

以下是在Vue.js中禁用输入的语法：

@click = "disabled"

示例

首先，我们需要创建一个Vue项目。要做到这一点，您可以参考这个页面。在您的Vue项目中创建两个文件app.js和index.html。将下面的代码片段复制并粘贴到您的Vue项目中，然后运行Vue项目。您将在浏览器窗口中看到下面的输出。

文件名 – app.js
目录结构 — $ 项目/public — app.js

// Setting the default value as false
var app = new Vue({
   el: '#app',
   data: {
      disabled: 0
   }
});

文件名 – index.html
目录结构 — $ 项目名/公共文件夹 — index.html

<!DOCTYPE html>
<html>
<head>
   <title>
      VueJS | v-else directive
   </title>
   <!-- Load Vuejs -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div style="text-align: center;">
         <h1 style="color: green;">
            Welcome to Tutorials Point
         </h1>
         <b>
            VueJS | v-else directive
         </b>
      </div>
      <div id="app" style="text-align: center;">
         <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
         <input type="text" :disabled="disabled == 1">
         <pre>{{ $data }}</pre>
      </div>
      <script src='app.js'></script>
   </body>
</html>

运行以下命令以获得下面的输出 −

C://my-project/ > npm run serve

完整的代码

让我们通过将上述两个文件app.js和index.html组合在一起来创建一个完整的代码。我们现在可以将代码作为一个HTML程序运行。

<!DOCTYPE html>
<html>
<head>
   <title> VueJS | v-else directive </title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div style="text-align: center;">
         <b> VueJS | v-else directive </b>
      </div>
      <div id="app" style="text-align: center;">
         <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
         <input type="text" :disabled="disabled == 1">
         <pre>{{ $data }}</pre>
      </div>
      <script>

         // Setting the default value as false
         var app = new Vue({
            el: '#app',
            data: {
               disabled: 0
            }
         });
      </script>
   </body>
</html>

当您点击”切换启用”按钮时，输入框将被禁用，您将无法输入任何字符。因此，我们只需切换按钮来启用和禁用输入列。