国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js第六課 計(jì)算屬性

only_do / 789人閱讀

摘要：計(jì)算屬性計(jì)算屬性關(guān)鍵詞。計(jì)算屬性在處理一些復(fù)雜邏輯時(shí)是很有用的。接下來我們看看使用了計(jì)算屬性的實(shí)例實(shí)例原始字符串計(jì)算后反轉(zhuǎn)字符串計(jì)算屬性的指向?qū)嵗龂L試一下實(shí)例中聲明了一個(gè)計(jì)算屬性。提供的函數(shù)將用作屬性的。依賴于，在發(fā)生改變時(shí)，也會(huì)更新。

Vue.js 計(jì)算屬性

計(jì)算屬性關(guān)鍵詞: computed。

計(jì)算屬性在處理一些復(fù)雜邏輯時(shí)是很有用的。

可以看下以下反轉(zhuǎn)字符串的例子：
實(shí)例 1


{{ message.split("").reverse().join("") }}

嘗試一下 ?

實(shí)例 1 中模板變的很復(fù)雜起來，也不容易看懂理解。

接下來我們看看使用了計(jì)算屬性的實(shí)例：
實(shí)例 2


原始字符串: {{ message }}


計(jì)算后反轉(zhuǎn)字符串: {{ reversedMessage }}


嘗試一下 ?

實(shí)例 2 中聲明了一個(gè)計(jì)算屬性 reversedMessage 。

提供的函數(shù)將用作屬性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依賴于 vm.message，在 vm.message 發(fā)生改變時(shí)，vm.reversedMessage 也會(huì)更新。
computed vs methods

我們可以使用 methods 來替代 computed，效果上兩個(gè)都是一樣的，但是 computed 是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods ，在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行。
實(shí)例 3
methods: {
reversedMessage2: function () {

return this.message.split("").reverse().join("")

}
}

嘗試一下 ?

可以說使用 computed 性能會(huì)更好，但是如果你不希望緩存，你可以使用 methods 屬性。
computed setter

computed 屬性默認(rèn)只有 getter ，不過在需要時(shí)你也可以提供一個(gè) setter ：
實(shí)例 4
var vm = new Vue({
el: "#app",
data: {

name: "Google",
url: "http://www.google.com"

},
computed: {

site: {
  // getter
  get: function () {
    return this.name + " " + this.url
  },
  // setter
  set: function (newValue) {
    var names = newValue.split(" ")
    this.name = names[0]
    this.url = names[names.length - 1]
  }
}

}
})
// 調(diào)用 setter， vm.name 和 vm.url 也會(huì)被對(duì)應(yīng)更新
vm.site = "菜鳥教程 http://www.runoob.com";
document.write("name: " + vm.name);
document.write("
");
document.write("url: " + vm.url);

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/22995.html

相關(guān)文章

  • 原生js練習(xí)題---第六課

    摘要：自定義多級(jí)右鍵菜單實(shí)現(xiàn)效果自定義多級(jí)右鍵菜單第五課第六題中已經(jīng)通過事件實(shí)現(xiàn)了一級(jí)右鍵菜單，所以這題只要在上面再添加事件喚出子菜單即可。 0x1完美拖拽 實(shí)現(xiàn)效果：6-01完美拖動(dòng) 這里沒有使用h5的拖動(dòng)，畢竟原題也是考察借助鼠標(biāo)事件實(shí)現(xiàn)自定義的拖動(dòng)，所以就借鑒了《js高級(jí)程序設(shè)計(jì)》里的自定義拖動(dòng)自己封裝了個(gè)拖動(dòng)api，當(dāng)然由于做這個(gè)系列題目使用的都是es5的語法，所以IE8往下就兼容不...

    tinyq 評(píng)論0 收藏0

  • 第六課 Html5常用標(biāo)簽 html5學(xué)習(xí)1

    摘要：標(biāo)簽的認(rèn)識(shí)一標(biāo)簽的分類雙標(biāo)簽如單標(biāo)簽如換行標(biāo)簽二標(biāo)簽的關(guān)系嵌套關(guān)系如與父子關(guān)系并列關(guān)系如與兄弟關(guān)系三排版標(biāo)簽標(biāo)題標(biāo)簽比較重要，一般用作網(wǎng)站的段落標(biāo)簽水平線標(biāo)簽單標(biāo)簽換行標(biāo)簽標(biāo)簽網(wǎng)頁布局標(biāo)親盒子四文本格式化標(biāo)簽文本加粗標(biāo)簽不推薦使用的加粗標(biāo)HTML標(biāo)簽的認(rèn)識(shí)一、標(biāo)簽的分類1、雙標(biāo)簽 如 2、單標(biāo)簽 如 換行標(biāo)簽 二、標(biāo)簽的關(guān)系1、嵌套關(guān)系 如 與title 父子關(guān)系2、并列關(guān)系如與 兄弟關(guān)系...

    siberiawolf 評(píng)論0 收藏0

  • 百度前端學(xué)院-基礎(chǔ)學(xué)院-第吳課/第六課

    摘要：邊界也會(huì)忽略百分比寬度設(shè)置。背景裁剪，值有改變盒子計(jì)算值只是不包含和只包含內(nèi)容高度今天是一個(gè)跨天的任務(wù)，學(xué)習(xí)目標(biāo)是：掌握CSS盒模型及Float； 盒模型要點(diǎn)： 如果盒子的高度被設(shè)置為百分比長度，那么盒子高度不會(huì)遵循這個(gè)設(shè)置了的百分比長度，而是總會(huì)采用盒子內(nèi)容的高度，除非給它設(shè)置了一個(gè)絕對(duì)高度（例如，像素或者 em）。這比把頁面上每個(gè)盒子的高度默認(rèn)設(shè)置為視口高度的 100% 更方便。 邊界...

    dunizb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<