vue中動態(tài)參數(shù)與計算屬性的使用方法
一，動態(tài)參數(shù)
從 2.6.0 開始，可以用方括號括起來的 JavaScript 表達(dá)式作為一個指令的參數(shù)：
<a v-bind:[attributeName]=“url”> …
這里的 attributeName 會被作為一個 JavaScript 表達(dá)式進(jìn)行動態(tài)求值，求得的值將會作為最終的參數(shù)來使用。例如，如果你的 Vue 實例有一個 data property attributeName，其值為 “href”，那么這個綁定將等價于 v-bind:href。
同樣地，你可以使用動態(tài)參數(shù)為一個動態(tài)的事件名綁定處理函數(shù)：
<a v-on:[eventName]=“doSomething”> …
在這個示例中，當(dāng) eventName 的值為 “focus” 時，v-on:[eventName] 將等價于 v-on:focus。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動態(tài)參數(shù)</title>
<script src="vue.js"></script>
</head>
<body>
<div id='app7'>
<span v-on:[event_name]='dosomething'>{{msg}}</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#app7",
data:{
msg:100,
event_name:'click'
},
methods:{
dosomething:function(){
this.msg = this.msg + 1
}
}
})
</script>
</html>
二、計算屬性
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
{{ message.split('').reverse().join('') }}
在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉(zhuǎn)字符串。當(dāng)你想要在模板中的多處包含此翻轉(zhuǎn)字符串時，就會更加難以處理。
所以，對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計算屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計算屬性</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app'>{{value_add}}</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
value:100
},
computed:{ //與methods方法類似
value_add:function(){
return this.value + 100
}
}
})
</script>
</html>
總結(jié)
到此這篇關(guān)于vue中動態(tài)參數(shù)與計算屬性使用的文章就介紹到這了,更多相關(guān)vue動態(tài)參數(shù)與計算屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+Flask實現(xiàn)簡單的登錄驗證跳轉(zhuǎn)的示例代碼
本篇文章主要介紹了Vue+Flask實現(xiàn)簡單的登錄驗證跳轉(zhuǎn)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue中的watch是什么以及watch和computed的區(qū)別
這篇文章主要介紹了Vue中的watch是什么以及watch和computed的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要給大家介紹了關(guān)于Vue3項目中引入html頁面的相關(guān)資料,Vue3是一個JavaScript框架,通常我們使用它來構(gòu)建單頁應(yīng)用程序(SPA),如果你想在HTML頁面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下2023-09-09
vue2.0 實現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)）
這篇文章主要介紹了vue2.0 實現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)），vue-route 提供的 beforeRouteUpdate 可以方便地實現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了vue后臺管理添加多語言功能的實現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue中 Runtime + Compiler 和 Runtime-o
這篇文章主要介紹了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式含義和區(qū)別,結(jié)合實例形式詳細(xì)分析了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式基本功能、原理、區(qū)別與相關(guān)注意事項,需要的朋友可以參考下2023-06-06
nextTick是Vue提供的一個全局API，由于Vue的異步更新策略導(dǎo)致我們對數(shù)據(jù)的修改不會立刻體現(xiàn)，在DOM變化上，此時如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了前端Vue2、Vue3和不同版本nuxt的插槽使用的相關(guān)資料,Vue2和Vue3中,插槽機制允許在組件模板中定義占位符,并在使用組件時插入自定義內(nèi)容,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個封裝
本篇文章主要介紹了詳解給Vue2路由導(dǎo)航鉤子和axios攔截器做個封裝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot>?表示，父組件可以在這個占位符中填充任何模板代碼，如?HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03