代码由两个输入字段组成，如果fullname的值大于3，则假设将initial输入字段背景变为绿色。 有办法做到吗？
查看
<div id="app">
<input type="text" v-model="fullname" placeholder="Enter Full Name" @input="changeInitialColor"/>
<input type="text" v-model="initial" placeholder="On Full Name make it green"/>
</div>
脚本
new Vue({
el: "#app",
data: {
fullname:'',
inital:''
},
methods: {
changeInitialColor(){
if(this.fullname.length > 3){
console.log('Change v-model=Initial field color into green');
}
else{
console.log("Dont change color");
}
}
}
})
下面是JSFiddle上的代码
https://jsfiddle.net/ujjumaki/kya27g9W/1/
一种方法是将计算属性与css类绑定一起使用
<input type="text" v-model="fullname" placeholder="Enter Full Name"/>
<input type="text" v-model="initial" :class="{ green: fullnameIsMoreThan3Chars }"/>
// --
,methods: { ... }
,computed: {
fullnameIsMoreThan3Chars(){
return this.fullname.length > 3;
}
}
您可以使用样式或类绑定，如style=“{'background-color':fullname.length>3？'green':''}”:
<input type="text" v-model="initial" style="{'background-color':fullname.length>3?'green':''}" placeholder="On Full Name make it green"/>
