Vue实现动态响应数据变化

Vue是MVVM模式，即Model-View-ViewModel，通过绑定数据即可以实时改变视图显示。

比如：使用v-blink动态绑定属性

<div v-blink:class="property"></div>

使用v-html来绑定带有标签的内容（会解析标签）

<div v-blink:class="property" v-html="content"></div>

使用v-text来绑定纯文本的内容（标签会以文本的形式输出）

<div v-blink:class="property" v-text="content"></div>

无论通过哪种形式绑定，都需要在Vue中的data中定义

var App = new Vue ({
 el: '#app',
 data: {
  property: '',
  content: '',
  example: [],
 }
 methods: {
 }
});

但是如果你需要在接来下的工作中使用到新的变量，或者你发现你改变已在data中定义的对象的值，但是视图却没有动态变化。可以通过以下方式解决：

Vuejs扩展了观察数组

1.使用$set

//等同于 App.example[0] = {name: 1}
App.example.$set(0, {name: 1});

2.使用全局Vue

Vue.set(example, 'name', 1);

通过这两种种方式都可以使视图更新

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

赞 (0)

相关推荐

  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • vue.js实现数据动态响应 Vue.set的简单应用

    vue.js实现数据动态响应 Vue.set的简单应用

    在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值 比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码) 下面上代码 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.min.js

  • vue数据双向绑定原理解析（get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通过事件回调函数操作的,model到view的绑定有多种方法. angular,react,vue等mv*模式的框架都实现了数据双向绑定:angular是通过脏检查即新老数据的比较来确定哪些数据发生了变化,从而将它更新到view中:vue则是通过设置数据的get和set函数来实现的,这种方式在性能上是

  • 深入理解vue中的$set

    深入理解vue中的$set

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <scri

  • Vue实现动态响应数据变化

    Vue是MVVM模式,即Model-View-ViewModel,通过绑定数据即可以实时改变视图显示. 比如:使用v-blink动态绑定属性 <div v-blink:class="property"></div> 使用v-html来绑定带有标签的内容(会解析标签) <div v-blink:class="property" v-html="content"></div> 使用v-text来绑定纯文

  • Vue不能检测到数据变化的几种情况说明

    Vue不能检测到数据变化的几种情况说明

    目录 Vue不能检测到数据变化的情况 第一类:对于数组 第二类:对于对象 Vue检测数据的原理 总结一下 Vue不能检测到数据变化的情况 Vue 实现了数据的双向绑定,所以我们在更改数据时,页面就会实时的反映出修改的变化 但是由于javascript 的限制,有几种情况,vue是不能检测到数据变化的 第一类:对于数组 1. 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 2. 当你修改数组的长度时,例如: vm.items.length =

  • vue watch自动检测数据变化实时渲染的方法

    vue watch自动检测数据变化实时渲染的方法

    本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下: 首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 第一个hand

  • vue select选择框数据变化监听方法

    1.使用v-model在select标签上进行数据双向绑定, 2.在data里边添加val:' ', 3.最后就是监听事件的写法,写在methods之外. 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue项目中的数据变化被watch监听并处理

    目录 vue数据变化被watch监听处理 监听当前vue文件数据 监听vuex中的数据 如何正确使用watch监听属性变化 基本用法 监听object 初始化变量触发监听回调 vue数据变化被watch监听处理 监听当前vue文件数据 例如,当前的vue文件的data中有如下属性: data() {     return {         dialogFormVisible: false,     } } 要监听dialogFormVisible变量的数据变化,则代码如下: watch: {

  • vue实现动态添加数据滚动条自动滚动到底部的示例代码

    在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll (found in <Hello>) 这个一直找不到原因,可能是我vue的版本是2.2不支持

  • 在vue中对数组值变化的监听与重新响应渲染操作

    在我们项目开发过程中,实例中的数据类型可以是对象.数组等.在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求.或者查阅这篇文章 例如: <script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj()

  • 基于Vue实例对象的数据选项

    基于Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data data是Vue实例的数据对象.Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化 [注意]不应该对data属性使用箭头函数 <div id="app"> {{ message }} </div> <script&

  • 小程序使用watch监听数据变化的方法详解

    众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法,当被监听的数据的值改变时,调用该方法.​​ 我们需要用到Javascript中的Object.defineProperty()方法,来手动劫持对象的getter/setter,从而实现给对象赋值时(调用setter),执行watch对象中相对应的函数,达到监听效果. Object.definePr

  • Vue.set()实现数据动态响应的方法

    Vue.set()实现数据动态响应的方法

    在vue里面,我们操作最多的就是各种数据,在jquery里面,我们习惯通过下标定向找到数据,然后重新赋值 比如var a[0]=111;(希望上家公司原谅菜鸟的我写了不少这样的代码

随机推荐