資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 VueJS 中的計算屬性中傳遞引數？
計算屬性和方法的區別在於，**計算屬性會被快取**，這些屬性只有在它們的依賴項發生變化時才會改變。方法會在每次被呼叫時都會被評估。唯一有用的情況是使用者想要獲取器並且需要具有相同的引數化。同樣的情況也發生在 vuex 中。
示例
複製並貼上以下程式碼片段到你的 Vue 專案中，並執行 Vue 專案。你將在瀏覽器視窗中看到以下輸出。
檔名 - app.js
目錄結構 -- $project/public -- app.js
// Retrieving the computed properties from parameters
new Vue({
el: '#container',
data() {
return {
name: 'John',
lastname: 'Wick'
}
},
filters: {
prepend: (name, lastname, prefix) => {
return `${prefix} ${name} ${lastname}`
}
}
});
檔名 - index.html
目錄結構 -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<h2> Passing Components in Computed Properties </h2>
</div>
<div id="container">
<h3 style="text-align: center;">{{ name, lastname | prepend('Gracias ! ') }}!</h3>
</div>
<script src='app.js'></script>
</body>
</html>
執行以下命令以獲取以下輸出 -
C://my-project/ > npm run serve
包含 HTML 的完整程式碼
現在讓我們使用上面的 app.js 和 index.html 檔案建立一個 HTML 檔案。以下程式可以作為 HTML 檔案執行。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align: center;">
<h2> Passing Components in Computed Properties </h2>
</div>
<div id="container">
<h3 style="text-align: center;">{{ name, lastname | prepend('Gracias ! ') }}!</h3>
</div>
<script>
// Retrieving the computed properties from parameters
new Vue({
el: '#container',
data() {
return {
name: 'John',
lastname: 'Wick'
}
},
filters: {
prepend: (name, lastname, prefix) => {
return `${prefix} ${name} ${lastname}`
}
}
});
</script>
</body>
</html>
示例
以下示例演示瞭如何在 Vue.js 中向計算屬性傳遞引數 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Passing parameters to Computed Properties</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>Passing parameters to Computed Properties </h2>
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" v-model="firstName">
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" v-model="lastName">
</div>
<div>
<label for="full-name">Full Name:</label>
<span id="full-name">{{ getFullName('Hello') }}</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
},
computed: {
getFullName: function () {
return function (prefix) {
return prefix + ' ' + this.firstName + ' ' + this.lastName;
}
},
},
});
</script>
</body>
</html>
這裡我們定義了兩個資料屬性 - firstName 和 lastName。這些屬性使用 v-model 指令繫結到輸入欄位。
我們還定義了一個名為 fullName 的計算屬性，它將 firstName 和 lastName 資料屬性與一個空格連線起來。
最後，我們在一個 span 元素中渲染計算屬性 fullName，並將其 id 屬性設定為 full-name。當用戶在輸入欄位中鍵入時，計算屬性會自動更新，並在 span 元素中顯示完整名稱。
更新於: 2023年4月12日
2K+ 閱讀量
廣告