Vue实现动态响应数据变化
2017-04-28 10:33
676 查看
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 动态响应数据变化
- vue.js实现数据动态响应 Vue.set的简单应用
- Vue.set()实现数据动态响应的方法
- vue动态数据绑定2---响应数据变化
- vue.js实现数据动态响应(Vue.set的应用)
- vue+vue-router+vuex,利用vue-router2.2.0新增特性addRoutes实现路由动态加载,菜单动态加载,运用于后台管理系统,路由数据取自数据库
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- vue.js实现输入框输入值内容实时响应变化示例
- vue实现动态添加数据滚动条自动滚动到底部的示例代码
- vue动态数据绑定3--深层次数据变化逐层往上传播
- WPF Datagrid Header数据绑定,表头复选框实现全选、全否、部分选中,根据条目动态变化
- vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变
- Vue.js实现数据响应的方法
- vue实现动态数据绑定
- jQuery实现响应鼠标背景变化的动态菜单效果代码
- Vue实现动态创建和删除数据的方法
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- vue.js 利用SocketCluster实现动态添加数据及排序
- vue动态载入变量键值名,实现数据双向绑定
- Vue.js学习(二):computed响应数据变化与其他几种方法的比较