Vue实现动态响应数据变化
更新时间：2017年04月28日 10:33:30 作者：xjlinme
本篇文章主要介绍了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);
通过这两种种方式都可以使视图更新
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue 中v-model的完整用法及v-model的实现原理解析
这篇文章详细介绍了Vue.js中的v-model指令的使用,包括基本用法、原理、结合不同类型的表单元素（如radio、checkbox、select）以及使用修饰符（如lazy、number、trim）等,感兴趣的朋友一起看看吧2025-02-02
vue中国城市选择器的使用教程(element-china-area-data)
这篇文章主要给大家介绍了关于vue中国城市选择器使用(element-china-area-data)的相关资料,使用element-china-area-data插件可以非常方便地实现省市县三级联动选择器,需要的朋友可以参考下2023-11-11
vue3中的reactive、readonly和shallowReactive使用详解
在 Vue3 中,可以使用 shallowReactive 函数创建一个浅层响应式对象,它接收一个普通对象作为参数,返回一个浅层响应式代理对象,本文给大家介绍vue3中的reactive、readonly和shallowReactive使用,感兴趣的朋友跟随小编一起看看吧2024-04-04
Vue3项目页面实现echarts图表渐变色的动态配置的实现步骤
在开发可配置业务平台时,需要实现让用户对项目内echarts图表的动态配置,让用户脱离代码也能实现简单的图表样式配置,颜色作为图表样式的重要组成部分,其配置方式是项目要解决的重点问题,所以本文介绍了Vue3项目页面实现echarts图表渐变色的动态配置2024-10-10
这篇文章主要介绍了vue 指令之气泡提示效果的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
这篇文章主要给大家介绍了关于Vue中加载天地图的离线地图的基本步骤,Vue天地图离线地图是指基于Vue框架开发的应用程序,使用天地图离线地图服务提供商提供的地图数据,可以在没有网络的情况下使用地图功能,需要的朋友可以参考下2023-10-10
这篇文章主要给大家介绍了关于vue设置页面背景及背景图片的相关资料,在Vue项目开发中我们经常要向页面中添加背景图片,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
Vue3响应式高阶用法之shallowReadonly()使用
在前端开发中,Vue3的shallowReadonly() API允许开发者创建部分只读的状态,这对于保持顶层属性不变而内部属性可变的场景非常有用,本文将详细介绍 shallowReadonly() 的使用方法及其应用场景,具有一定的参考价值,感兴趣的可以了解一下2024-09-09
Vue项目从webpack3.x升级webpack4不完全指南
前段时间，泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，现在才拉出来记录一下，已备忘之用，也和大家分享一下,需要的朋友可以参考下2019-04-04
本文通过实例代码给大家介绍了Vue隐藏显示、只读功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
最新评论