欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中的計(jì)算屬性和偵聽(tīng)屬性

 更新時(shí)間：2020年11月06日 09:03:56   作者：LC蝸牛  
這篇文章主要介紹了vue中的計(jì)算屬性和偵聽(tīng)屬性，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下

計(jì)算屬性

計(jì)算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯

計(jì)算屬性具有依賴性，計(jì)算屬性依賴 data中的初始值，只有當(dāng)初始值改變的時(shí)候，計(jì)算屬性才會(huì)再次計(jì)算

計(jì)算屬性一般書(shū)寫(xiě)為一個(gè)函數(shù)，返回了一個(gè)值，這個(gè)值具有依賴性，只有依賴的那個(gè)值發(fā)生改變，他才會(huì)重新計(jì)算

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>表單輸入綁定</title>
</head>
<body>
 <div id="app">

  {{ reverseMsg }}---- {{ reverseMsg }}-------- {{ reverseMsg }} //直接使用計(jì)算屬性中的函數(shù)就是所要的數(shù)據(jù)

 </div>
</body>
<script src="vue.js"></script> //vue的js，不然使用不了vue語(yǔ)法
<script>
 const app = new Vue({
  el: '#app',
  data: {
   msg: 'hello world'
  },
  computed: {
   reverseMsg () { // 計(jì)算屬性是一個(gè)函數(shù)，返回一個(gè)值，使用和data中的選項(xiàng)一樣
    console.log('computed') // 執(zhí)行1次 --- 依賴性
    return this.msg.split('').reverse().join('');
   }
  }
 })
</script>
</html>

偵聽(tīng)屬性(監(jiān)聽(tīng)屬性)

vue提供了檢測(cè)數(shù)據(jù)變化的一個(gè)屬性 watch 可以通過(guò)  newVal 獲取變化之后的值

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>表單輸入綁定</title>
</head>
<body>
 <div id="app">
  <input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = {{ fullname }}

 </div>
</body>
<script src="vue.js"></script>
<script>
 const app = new Vue({
  el: '#app',
  data: {
   firstname: '李',
   lastname: '小龍',
   fullname: '李小龍'
  },
  watch: { // 偵聽(tīng)屬性
   firstname (newVal, oldVal) { // newVal變化之后的值
    this.fullname = newVal + this.lastname // 當(dāng)改變 姓 的時(shí)候執(zhí)行
   },
   lastname (newVal, oldVal) {
    this.fullname = this.firstname + newVal // 當(dāng)改變 名字 的時(shí)候執(zhí)行
   }
  }
 })
</script>
</html>

以上就是vue中的計(jì)算屬性和偵聽(tīng)屬性的詳細(xì)內(nèi)容，更多關(guān)于vue 計(jì)算屬性和偵聽(tīng)屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論