vue中動態引數與計算屬性的使用方法
阿新 • • 發佈：2021-08-10
一，動態引數
從 2.6.0 開始，可以用方括號括起來的 表示式作為一個指令的引數：
<a v-bind:[attributeName]=“url”> …
這裡的 attributeName 會被作為一個 Script 表示式進行動態求值，求得的值將會作為最終的引數來使用。例如，如果你的 例項有一個 data property attributeName，其值為 “href”，那麼這個繫結將等價於 v-bind:href。
同樣地，你可以使用動態引數為一個動態的事件名繫結處理函式：
<a v-on:[eventName]=“doSomething”> …
在這個示例中，當 eventNam
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<客棧title>動態引數</title>
<script src="vue."></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>
二、計算屬性
模板內的表示式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
{{ messagewww.cppcns.com.split('').reverse().join('') }}
在這個地方，模板不再是簡單的宣告式邏輯。你必須看一段時間才能意識到，這裡是想要顯示變數 message 的翻轉字串。當你想要在模板中的多處包含此翻轉字串時，就會更加難以處理。
所以，對於任何複雜邏輯，你都應當使用計算屬性。
<!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
},compuwww.cppcns.com
總結
到此這篇關於vue中程式設計客棧動態引數與計算屬性使用的文章就介紹到這了,更多相關vue動態引數與計算屬性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！