標籤：拆分 scale utf-8 title class 1.0 .net document oct
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <!-- vue.js 引入 --> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>10 </head>11 <body>12 <div id="app">13 first name: <input type="text" v-model="firstName">14 <br>15 second name: <input type="text" v-model="lastName">16 <br>17 full name: <div>{{fullName}}</div>18 </div>19 20 <script>21 var app = new Vue({22 el: ‘#app‘,23 data () {24 return {25 firstName: ‘‘,26 lastName: ‘‘27 }28 },29 computed: {30 // 輸入firstName和lastName自動拼成fullName31 // 方法：132 /*fullName: function () {33 return this.firstName + ‘ ‘ + this.lastName34 }*/35 // 方法：236 /*fullName: {37 get: function () {38 return this.firstName + ‘ ‘ + this.lastName39 }40 }*/41 42 // 輸入fullName後自動拆分成兩個name43 fullName: {44 get: function () {45 return this.firstName + ‘ ‘ + this.lastName46 },47 set: function (fullName) {48 var arr = fullName.split(‘ ‘);49 // 以空格來分，將一個字串分割成了兩個字串50 this.firstName = arr[0]51 this.lastName = arr[1]52 }53 }54 }55 })56 </script>57 </body>58 </html>
結果
Vue中computed的set和get方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
