Nuxt.js 数据双向绑定的实现

2024-09-28 12:03:02

假定我们有一个需求，一开始通过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的值达到数据双向绑定的效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Nuxt.js 数据双向绑定的实现

假定我们有一个需求,一开始通过mounted()将一个字符串渲染在页面上,但是我们经过操作后修改了数据并且需要将得到的结果重新异步渲染到页面中去,而不是跳转刷新页面来重新渲染首先模板中data()中定义数据,并且要将定义的数据显示出来 <template> <div> <span @click="click">{{ text }}</span> </div> </template> <script>
JS数据双向绑定原理与用法实例分析

本文实例讲述了JS数据双向绑定原理与用法.分享给大家供大家参考,具体如下: 通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title">Hello</h1> <input type="text" id="a" /> 首先是在界面上更改input的值,需要监听input的"input&qu
JS原生数据双向绑定实现代码

代码如下: <span style="font-family:Times New Roman;font-size:14px;" deep="7"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script> fu
vue.js使用v-model指令实现的数据双向绑定功能示例

本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能.分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过
js实现视图和数据双向绑定的方法分析

本文实例讲述了js实现视图和数据双向绑定的方法.分享给大家供大家参考,具体如下: 前言视图和数据绑定,使视图和逻辑层分离,使视图层变为数据驱动是前端的一大进步.由此诞生了mvvm类的前端框架,大大提升了开发的效率. 那么在使用旧有的项目中,如何使用更加先进的设计模式来替换掉大量的面向过程编程. 各大框架对于数据绑定的实现都有各自的方式,这里不做深入只是简单介绍一下. Vue使用了es5 Object.defineProperty的特性来实现对数据读取和设置的监听,是一种元编程的方式.个人感觉
js实现数据双向绑定（访问器监听）

本文实例为大家分享了js实现数据双向绑定的具体代码,供大家参考,具体内容如下双向绑定: 双向绑定基于MVVM模型:model-view-viewModel model: 模型层,负责业务逻辑以及与数据库的交互 view:视图层,负责将数据模型与UI结合,展示到页面中 viewModel:视图模型层,作为model和view的通信桥梁双向绑定的含义:当model数据发生变化的时候,会通知到view层,当用户修改了view层的数据的时候,会反映到模型层. 而双向数据绑定的好处在于:只关注于数据操
js实现数据双向绑定(访问器监听)

本文实例为大家分享了js实现数据双向绑定的具体代码,供大家参考,具体内容如下双向绑定: 双向绑定基于MVVM模型:model-view-viewModel model: 模型层,负责业务逻辑以及与数据库的交互 view:视图层,负责将数据模型与UI结合,展示到页面中 viewModel:视图模型层,作为model和view的通信桥梁双向绑定的含义:当model数据发生变化的时候,会通知到view层,当用户修改了view层的数据的时候,会反映到模型层. 而双向数据绑定的好处在于:只关注于数据操
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
理解Angular数据双向绑定

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> <span ng-bind="c
浅谈vue中数据双向绑定的实现原理

vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =

Nuxt.js 数据双向绑定的实现

相关推荐

随机推荐