是否可以在 Vue 中對函式進行資料系結?
在模板中,我有類似的東西: <title> {{nameofFunction()}}</title>
當我運行它時,它只是在頁面上說本機功能。
謝謝。
uj5u.com熱心網友回復:
Vue 中還有諸如“計算屬性”之類的東西,旨在做到這一點:
<template>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
export default {
data:() => ({
message: 'Hello'
}),
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
}
</script>
uj5u.com熱心網友回復:
是的你可以。您能分享一下您如何定義資料選項嗎?
這里我有一個適用于 Vue2 和 Vue3 的示例
<template>
<div id="app">
<h1>{{messageHelloFn()}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
messageHelloFn: (name = 'Lucas') => {
return `Hello ${name}`
}
};
}
};
</script>
實體:https : //codepen.io/LucasFer/pen/abywRMW
uj5u.com熱心網友回復:
js
const func = (str) => str
export default fn
<template>
<div id="app">
<div v-for="item in items">
{{ getTime(item) }}
</div>
<div>
{{ fn('a') }}
</div>
<div>
{{ func('b') }}
</div>
</div>
</template>
<script>
import func from './a.js'
export default {
data () {
return {
items: ['123123', '456456'],
fn: (str) => str
}
},
methods: {
getTime (v) {
return v '123'
}
}
};
</script>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/340263.html
標籤:javascript 功能 Vue.js 数据绑定
