三元表达式
test ? expression1 : expression2
参数
test
任何 Boolean 表达式。
expression1
如果 test 为 true,则返回表达式。可能是逗号表达式。
expression2
如果 test 为 false,则返回表达式。可以使用逗号表达式链接多个表达式。
var cc = true;
这里 表达式1 和表达式2不能同时写成一个字符串,这里需要至少有一个是变量或者两个都是变量,但是变量又不能是json 这种
<template>
<div>
<Modal v-model='modal1'>
<Form style="margin-top:30px;" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Name" prop="name">
<Input v-model="test1?test2:name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="E-mail" prop="mail">
<Input v-model="" placeholder="Enter your e-mail"></Input>
</FormItem>
<FormItem label="City" prop="city">
<Select v-model="" placeholder="Select your city">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
<Button type="primary" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</Modal>
<Input v-model="test1?'111':test2" placeholder="Enter your name"></Input>
<Button type="primary" @click="showModal" style="margin-left: 8px">展示Modal</Button>
</div>
</template>
<script>
export default {
data () {
return {
modal1:false,
test1:true,
test2:'8888',
formValidate: {
name:'4335435'
},
name:'re',
ruleValidate: {
name: [
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
],
mail: [
{ required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
{ type: 'email', message: 'Incorrect email format', trigger: 'blur' }
],
city: [
{ required: true, message: 'Please select the city', trigger: 'change' }
]
}
}
},
methods: {
showModal(){
this.modal1 = true;
(this.test1)
},
handleSubmit (name) {
this.test1 = true;
this.$refs[name].validate((valid) => {
if (valid) {
this.$('Success!');
} else {
this.$('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
</script>