您好,登錄后才能下訂單哦!
使用Nuxt.js怎么實現(xiàn)數(shù)據(jù)雙向綁定?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
JS是JavaScript的簡稱,它是一種直譯式的腳本語言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,主要用于web的開發(fā),可以給網(wǎng)站添加各種各樣的動態(tài)效果,讓網(wǎng)頁更加美觀。
首先模板中data()中定義數(shù)據(jù),并且要將定義的數(shù)據(jù)顯示出來
<template> <div> <span @click="click">{{ text }}</span> </div> </template> <script> export default { data(){ return { text: '', newText: '1' } }, async mounted(){ let {status,data:{text}} = await self.$axios.post('/getText'); this.text = text; } } </script>
然后我們通過methods里的函數(shù)來獲取后臺的數(shù)據(jù)
methods:{ async click(){ let {status,data:{text}} = await self.$axios.post('/updateText',{ text, newText }) this.text = text; } }
服務端的接口如下
router.get('/getText', async (ctx) => { let text= await Text.find(); ctx.body = { text } } router.post('/updateText', async (ctx) => { const {text,newText} = ctx.request.body; let oldVal = text; let newVal = newText; let ncomment = await Comment.updateOne(oldVal,newVal); let text= await Text.find(); ctx.body={ text } })
看完上述內(nèi)容,你們掌握使用Nuxt.js怎么實現(xiàn)數(shù)據(jù)雙向綁定的方法了嗎?如果還想學到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。