Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<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>