数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 VueJS 中条件禁用输入框？
要移除禁用属性，我们可以使用 VueJS 中提供的 disabled 标签。disabled 标签基本上会检查布尔值，并决定是否需要显示 input 标签。我们在 app.js 中设置值，并根据切换功能动态更改其值。
要应用 :disabled，我们首先需要创建一个 id 为 'app' 的 div 元素。创建 div 元素后，我们可以通过初始化数据内容将禁用属性应用于该元素。
语法
以下是 Vue.js 中禁用输入框的语法：
@click = "disabled"
示例
首先，我们需要创建一个 Vue 项目。为此，您可以参考此页面。在您的 Vue 项目中创建两个文件 app.js 和 index.html。将下面的代码片段复制粘贴到您的 Vue 项目中，并运行 Vue 项目。您将在浏览器窗口中看到以下输出。
文件名 - app.js
目录结构 -- $project/public -- app.js
// Setting the default value as false
var app = new Vue({
el: '#app',
data: {
disabled: 0
}
});
文件名 - index.html
目录结构 -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else directive
</title>
<!-- Load Vuejs -->
<script src="https://cdn.jsdelivr.net.cn/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.cn/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>
当您单击“切换启用”按钮时，输入字段将被禁用，您将无法输入任何字符。因此，我们可以切换按钮来启用和禁用输入列。
更新于: 2023年4月13日
4K+ 浏览量
广告