1. <template>
    2.     <view class="content">
    3.         <image class="logo" src="/static/logo.png"></image>
    4.         <view class="text-area">
    5.             <text class="title">{{title}}</text>
    6.       <input type="text" :value="title" @input="change" />
    7.         </view>
    8.     <view>
    9.         i am {{student.age}} years old. <br/>    ********json对象的渲染*************
    10.       i have skills such as {{skill[0]}}{{skill[1]}}{{skill[2]}}{{skill[3]}}{{skill[4]}}        ****这里的数组暂不使用for循环*******数组的渲染****************
    11.     </view>
    12.     </view>
    13. </template>
    16. <script>
    17.     export default {
    18.         data() {
    19.             return {
    20.         title:'hello practice',
    21.                 student:{                                 *********************
    22.                 age:18
    23.         },
    24.         skill:["java","html","css","springcloud","vue"]   *********************
    25.             }
    26.         },   
    27.         onLoad() {
    29.         },
    30.         methods: {                        ********用户自定义方法********
    31.                 change(e){                                        ****************
    32.             var txtTitle = e.detail.value;       ****************
    33.           this.title = txtTitle;               ****************
    34.         }
    35.         }
    36.     }
    37. </script>
    39. <style>
    40.     .content {
    41.         display: flex;
    42.         flex-direction: column;
    43.         align-items: center;
    44.         justify-content: center;
    45.     }
    47.     .logo {
    48.         height: 200rpx;
    49.         width: 200rpx;
    50.         margin-top: 200rpx;
    51.         margin-left: auto;
    52.         margin-right: auto;
    53.         margin-bottom: 50rpx;
    54.     }
    56.     .text-area {
    57.         display: flex;
    58.         justify-content: center;
    59.     }
    61.     .title {
    62.         font-size: 36rpx;
    63.         color: #8f8f94;
    64.     }
    65. </style>