源代码
<template>
<div>
<h2>Basic TextBox</h2>
<p>The TextBox allows users to enter a string through the inputing box.</p>
<div style="margin-bottom:10px;display:inline-block;margin-right:1em">
<Label for="t1" align="top">First Name:</Label>
<TextBox inputId="t1" v-model="fname" iconCls="icon-man" placeholder="First name"></TextBox>
</div><div style="margin-bottom:10px;display:inline-block">
<Label for="t2" align="top">Last Name:</Label>
<TextBox inputId="t2" v-model="lname" placeholder="Last name"></TextBox>
</div>
<div style="margin-bottom:10px">
<Label for="t3" align="top">Address:</Label>
<TextBox inputId="t3" v-model="addr" style="width:25em"></TextBox>
</div>
<div style="margin-bottom:10px">
<Label for="t4" align="top">Company:</Label>
<TextBox inputId="t4" :disabled="true" placeholder="Company" style="width:25em"></TextBox>
</div>
<p v-if="fname">First Name: {{fname}}</p>
<p v-if="lname">Last Name: {{lname}}</p>
<p v-if="addr">Address: {{addr}}</p>
</div>
</template>
<script>
export default {
data() {
return {
fname: "",
lname: "",
addr: ""
};
}
};
</script>