假定我們有一個需求，一開始通過mounted()將一個字符串渲染在頁面上，但是我們經過操作后修改了數據并且需要將得到的結果重新異步渲染到頁面中去，而不是跳轉刷新頁面來重新渲染

首先模板中data()中定義數據，并且要將定義的數據顯示出來

<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里的函數來獲取后臺的數據

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 }})

這里有個重點！

獲取頁面傳過來的參數時必須使用結構賦值的方法獲取，不然獲取到的為一個Object，查詢將會出錯！

雙向綁定在這里的體現是：一開始通過mounted()將數據渲染到模板中，然后調用函數通過服務端的updateText接口改變數據，在updateText接口中更新完數據后，執行一遍查詢，將查詢結果返回到觸發的函數中。并在該函數中修改data()中text的值達到數據雙向綁定的效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。