三元表示式詳解
阿新 • • 發佈:2018-12-12
三元表示式 test ? expression1 : expression2
引數 test 任何 Boolean 表示式。
expression1 如果 test 為 true,則返回表示式。可能是逗號表示式。
expression2 如果 test 為 false,則返回表示式。可以使用逗號表示式連結多個表示式。
var cc = true;
這裡 表示式1 和表示式2不能同時寫成一個字串,這裡需要至少有一個是變數或者兩個都是變數,但是變數又不能是json form.user這種
<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="formValidate.mail" placeholder="Enter your e-mail"></Input> </FormItem> <FormItem label="City" prop="city"> <Select v-model="formValidate.city" 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; console.log(this.test1) }, handleSubmit (name) { this.test1 = true; this.$refs[name].validate((valid) => { if (valid) { this.$Message.success('Success!'); } else { this.$Message.error('Fail!'); } }) }, handleReset (name) { this.$refs[name].resetFields(); } } } </script>