我正在使用 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>
用法:
<textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield>
您可以使用
v-bind:disabled="foo"
或简称 :disabled="foo"
将其绑定到变量:
<textfield label="Name" value.sync="el.name" :disabled="myVar">
然后在 Vue 中你只需设置
this.myVar = true
即可禁用输入。
编辑:将其添加到您的模板中:
<template>
<input type="text" :disabled="disabled" :placeholder="placeholder" v-model="value">
</template>
正如所指出的,您的案例中不需要动态属性。
但是,你问是否可能,答案是肯定的。从 2.6.0 开始,您可以拥有动态属性。
示例:
<a v-bind:[attributeName]="whatever">
记录在这里
我试图弄清楚如何在使用 Vue v-for 循环时从数组值动态设置 html 标签的属性。
我要展示的内容:
每个div都有一个input标签,当用户输入值时改变值
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;
}
我们可以在 vue 中定义或更改属性的基本条件
请参考官方文档 https://v2.vuejs.org/v2/guide/syntax.html#Attributes
好的,如果你通过了 i18,试试这个 -
:placeholder="$t('languagePlaceholder')"
我用复选框做到了:
<select id="newTwootType" v-model="state.selectedTwootType">
<option
:value="option.value"
v-for="(option, index) in state.twootTypes"
:key="index">
{{ option.name }}
</option>
</select>
我的脚本
export default {
name: 'CreateNewTwootPanel',
setup(props, ctx) {
const state = reactive({
selectedTwootType: 'instant',
twootTypes: [
{ value: 'draft', name: 'Draft' },
{ value: 'instant', name: 'Instant Twoot' }
],
})
return {
state,
}
}
}
Vue3 错误示例:
BaseInput.vue
<template>
<div>
<label>{{ label }}</label>
<input v-bind="$attrs" :placeholder="label" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
<p v-if="error">{{ error }}</p>
</div>
</template>
<script setup>
defineProps(['label', 'modelValue', 'error'])
defineEmits(['update:modelValue'])
</script>
v-bind="$attrs"
如果你想传递属性给子标签或者<template>
中有多个标签你可以指定需要获取属性的标签。
登录.vue
<template>
<form @focusout="validateForm" @submit.prevent="onSubmit">
<BaseTitle title="Log in" h="h1"/>
<BaseInput type="email" v-model="email" label="Email" :error="emailError"/>
<BaseInput type="password" v-model="password" label="Password" :error="passwordError"/>
<BaseButton type="submit" label="LogIn" />
</form>
</template>
<script setup lang="ts">
const email = ref('')
const password = ref('')
const emailError = ref('')
const passwordError = ref('')
function validateForm() {
emailError.value = "Error"
}
function onSubmit() {
signIn({ email: email.value, password: password.value})
}
</script>
要设置名称为动态的属性(例如变量),可以使用方括号将动态参数传递给
v-bind
。
<div :[attrName]="attrValue">Content...</div>
这是
v-bind:[attrName]="attrValue"
的简写。