Javascript 如何在VueJs中动态添加属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39247411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add dynamically attribute in VueJs
提问by Maria Minh
I'm using vuejs and I wanna know how to have control on inputs (add disabled attribute when necessary). Is there any way to add dynamically attribute in vuejs ? Below my Textfield component:
我正在使用 vuejs，我想知道如何控制输入（必要时添加禁用属性）。有没有办法在 vuejs 中动态添加属性？在我的Textfield 组件下方：
<template>
<input type="text" placeholder="{{ placeholder }}" v-model="value">
</template>
<script>
export default {
props: {
disabled: {type: Boolean, default: false},
placeholder: {type: String, default: ""},
value: {twoWay: true, default: ""}
}
}
</script>
Usage:
用法：
<textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield>
回答by Jeff
You can bind it to a variable using v-bind:disabled="foo"or :disabled="foo"for short:
您可以使用v-bind:disabled="foo"或:disabled="foo"简称将其绑定到变量：
<textfield label="Name" value.sync="el.name" :disabled="myVar">
Then in Vue you can just set this.myVar = trueand it will disable the input.
然后在 Vue 中你可以设置this.myVar = true它并禁用输入。
Edit: add this to your template:
编辑：将此添加到您的模板中：
<template>
<input type="text" :disabled="disabled" placeholder="{{ placeholder }}" v-model="value">
</template>
回答by Black Horse
I am trying to figure out how to set the attribute of the html tags from the array value dynamically when using the Vue v-for loop.
我试图弄清楚在使用 Vue v-for 循环时如何从数组值动态设置 html 标签的属性。
What I am going to show:
我要展示的内容：
- There are 3 div elements with different background colors from array value(not static).
Each divs have a input tag and change the value when the user input value
- The first div's input converts lowercase to uppercase.
- second represents the mood, if enter 'happy', present 'good'. if enter 'sad', output 'bad'
- The third div input doubles the input value.
new Vue({ el: "#app", data: { isRounded: false, boxes: [ { inputData: "", outputData: "", color: "green", operation: "uppercase" }, { inputData: "", outputData: "", color: "red", operation: "feeling" }, { inputData: "", outputData: "", color: "blue", operation: "multiple" } ], feeling: { good: ["happy", "joyful", "calm"], bad: ["sad", "mad", "depressed"] } }, methods: { toggle: function(todo){ todo.done = !todo.done } }, watch: { boxes: { deep: true, immediate: true, handler: function(val) { this.boxes.map(box => { if (box.operation === "uppercase") box.outputData = box.inputData.toUpperCase(); else if (box.operation === "feeling") { box.outputData = this.feeling.good.includes(box.inputData) ? "GOOD" : this.feeling.bad.includes(box.inputData) ? "BAD" : ""; } else if (box.operation === "multiple") { if (box.inputData == "") box.outputData = ""; else box.outputData = parseInt(box.inputData) * 2; } }); } } }, mounted() { for (var i = 0; i < this.numBox; i++) { this.boxValue[i] = ""; this.bxData[i] = ""; } }, }) .clearfix{ clear: both; } .full-width{ width:100%; } input { background: transparent; text-decoration: underline; color: white; border: none; text-align: center; font-size:30px; } .box { float:left; color: white; width: 24%; margin-right: 1%; padding: 20px; background: blue; height: 100px; } .box-output { width: 100%; text-align: center; font-size:30px; } .box-rounded { border-radius: 50px; }
- 有 3 个 div 元素，其背景颜色与数组值（非静态）不同。
每个 div 都有一个 input 标签，并在用户输入值时更改值
- 第一个 div 的输入将小写转换为大写。
- 第二代表心情，如果输入'高兴'，则代表'好'。如果输入'sad'，输出'bad'
- 第三个 div 输入将输入值加倍。
new Vue({ el: "#app", data: { isRounded: false, boxes: [ { inputData: "", outputData: "", color: "green", operation: "uppercase" }, { inputData: "", outputData: "", color: "red", operation: "feeling" }, { inputData: "", outputData: "", color: "blue", operation: "multiple" } ], feeling: { good: ["happy", "joyful", "calm"], bad: ["sad", "mad", "depressed"] } }, methods: { toggle: function(todo){ todo.done = !todo.done } }, watch: { boxes: { deep: true, immediate: true, handler: function(val) { this.boxes.map(box => { if (box.operation === "uppercase") box.outputData = box.inputData.toUpperCase(); else if (box.operation === "feeling") { box.outputData = this.feeling.good.includes(box.inputData) ? "GOOD" : this.feeling.bad.includes(box.inputData) ? "BAD" : ""; } else if (box.operation === "multiple") { if (box.inputData == "") box.outputData = ""; else box.outputData = parseInt(box.inputData) * 2; } }); } } }, mounted() { for (var i = 0; i < this.numBox; i++) { this.boxValue[i] = ""; this.bxData[i] = ""; } }, }) .clearfix{ clear: both; } .full-width{ width:100%; } input { background: transparent; text-decoration: underline; color: white; border: none; text-align: center; font-size:30px; } .box { float:left; color: white; width: 24%; margin-right: 1%; padding: 20px; background: blue; height: 100px; } .box-output { width: 100%; text-align: center; font-size:30px; } .box-rounded { border-radius: 50px; }
回答by Pankaj Rupapara
base one condition we can define or change attributes in vue
基于一个条件，我们可以在 vue 中定义或更改属性
Please refer official document for the same https://vuejs.org/v2/guide/syntax.html#Attributes
