Java:錯誤:不支援發行版本5

阿新 • • 發佈：2022-05-19

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 
        Vue監視資料原理
        1.vue會監視data中所有層次的資料
        2.如何監視物件中資料
        通過setter實現監視，切要在new Vue時就傳入要檢測的資料
        （1）.物件中後追加的屬性，vue預設不做響應式處理
        （2）。如需給後新增的屬性做襄陽市，請使用下面APL：
            Vue. 
set(target,propertyName/index,value)或
            vm.$set(target,propertyName/index,value)
        3.如何監視資料中資料
            通過包括陣列更新元素的方法實現，本本質就是做了兩件事
            （1）呼叫原聲對應的方法對陣列進行更新
            （2）重新解析模板，進而更新頁面
        4.在vue修改陣列中的某個元素一定要用如下方法：
    1.
        push() 末尾新增
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse()
     
2.第二種解決方法
        Vue.set(vm._data.hobby.push,0,'睡覺') 
        vm._data.hobby.push('學習')
        vm.$set(vm.hobby,0,'放屁1') 
    特別注意：Vue.set()和vm.$set()不能給vm或vm的跟資料物件新增屬性
    資料劫持：修改了值，重新進行解析，並回顯頁面上
         -->
        <script src="vue.js"></script>
    </head>
    <body>
        <div id=" 
root">
            <h1>學生資訊</h1>
            <button @click="student.age++">年齡+1歲</button>
            <button @click="addSex">新增性別屬性，預設值：男</button>
            <button @click="student.sex = ' 女' ">修改性別</button>
            <button @click='addFrient'>在列表首位新增一個朋友</button>
            <button @click="insertSplice">修改第一個朋友的名字為：張三</button>
            <button @click="hobb">新增一個愛好</button>
            <button @click="upca">修改第一個愛好為：開車</button>
            
            <h3>姓名：{{student.name}}</h3>
            <h3>年齡:{{student.age}}</h3> 
            <h3 v-if="student.sex">性別:{{student.sex}}</h3>
            <h3>愛好:</h3>
            <ul>
                <li v-for="(h,index) in student.hobby" :key = index>
                    {{h}}
                </li>
            </ul>
            
            <h3>朋友們</h3>
            <ul>
                <li v-for="(f,index) in student.friends" :key="index">
                    {{f.name}}-{{f.age}}
                </li>
            </ul>
            
        </div>
         
        <script>
            Vue.config.productionTip = false
            
            const vm = new Vue({
                el:'#root',
                data:{
                student:{
                    name:'tom',
                    age:18,
                    hobby:['抽菸','喝酒','打架'],
                    friends:[
                        {name:'jerry',age:35},
                        {name:'tony',age:36}
                    ]
                    }
                },
                methods:{
                    addSex(){
                        Vue.set(this._data.student,'sex','男')
                    },
                    addFrient(){
                        this._data.student.friends.unshift({name:'peng',age:'99'})
                    }, 
                    insertSplice(){
                        this._data.student.friends[0].name = '張三'
                    },
                    hobb(){
                        this.student.hobby.push('學習')
                    },
                    upca(){
                        this.student.hobby.splice(0,1,'開車')
                    }
                }
            })
            
        </script>
        
    </body>
</html>