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"></script>
</head>
<body>
 <div id="app">
  <ul>
  <li v-for="item in listData">{{item}}</li>
 </ul>
 <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" v-text="he" @click="changeData()"></a>
 </div>
</body>
<script>
 new Vue({
 el:"#app",
 data:{
  he:"点我",
  listData:["a","b","c"]
  },
 methods:{
  changeData () {
   this.listData[0]="d";
  }
  }
 })
</script>
</html>

当我点击按钮时候，发现没有任何变化，页面上还是a,b,c

vue当然不会这么菜呢

下面是伟大的vue内置的方法来了

 Vue.set()

官方解释

设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

我的理解就是触发视图重新更新一遍，数据动态起来

Vue.set(a,b,c)

a是要更改的数据

b是数据的第几项

c是更改后的数据

解决上面数据不能更改后的代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="./js/vue.min.js"></script>
</head>
<body>
 <div id="app">
   <ul>
    <li v-for="item in listData">{{item}}</li>
  </ul>
  <a href="javascript:void(0)" v-text="he" @click="changeData()"></a>
 </div>
</body>
<script>
 new Vue({
  el:"#app",
  data:{
   he:"点我",
   listData:["a","b","c"]
   },
  methods:{
    changeData () {
     Vue.set(this.listData,0,'X')
    }
   }
 })
</script>
</html>

我们可以看到，this.listData数组的第一项已经被更改了

X

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

赞 (0)

相关推荐

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

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

  • 详解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实现动态响应数据变化

    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中的$set

    深入理解vue中的$set

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

  • 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.set()实现数据动态响应的方法

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

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

  • Vue.js实现数据响应的方法

    许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.

  • Vue.js使用axios动态获取response里的data数据操作

    今天开发时,使用axios返回的response中data有多个数据: 如果是获取cn里的数据的,可以用: response.data.cn 但是需求是根据选择来获取数据的,会发生变化,最开始的想法是,用一个变量来记录需要获取的key: 假设need是需要获取的某个key const dkey = this.need; response.data.dkey 这样发现获取不到数据,这是因为vue.js把dkey当成data里的某一个key了,类似于上面的"cn". 折腾了很久才突然想起,

  • Vue.js+HighCharts实现动态请求展示时序数据

    Vue.js+HighCharts实现动态请求展示时序数据

    本文实例为大家分享了Vue.js+HighCharts实现动态请求展示时序数据的具体代码,供大家参考,具体内容如下 <template>   <el-container>     <el-header>       <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="ha

  • vue.js 实现输入框动态添加功能

    代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &

  • vue.js实现点击后动态添加class及删除同级class的实现代码

    vue.js实现点击后动态添加class及删除同级class的实现代码

    最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下 html: <div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{

  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 <style type="text/css"> [v-cloak] { display: none; } </style> 第二步.在view上引用css模块 <div id="app" v-cloak> <h1>{{message}}</h1>

  • Vue.js 实现数据展示全部和收起功能

    如图所示,当我们获取到数据后每个栏都只显示5条,多出的部分隐藏,点击显示全部将数据都展现出来,如图所示 首先我们的数据类型是这样的, tableData: [ { "comment": "", "lscm": [ { "count": "1268", "id": 1, "namech": "OGC WMTS", "nameen"

  • 使用Vue.js和MJML创建响应式电子邮件

    使用Vue.js和MJML创建响应式电子邮件

    MJML是一种现代的电子邮件工具,使开发人员可以在所有设备和邮件客户端上创建美观.响应迅速的出色电子邮件.这种标记语言是为了减少编写响应式电子邮件的痛苦而设计的. 它的语义语法使其易于使用.它还具有功能丰富的标准组件,可缩短开发时间.在本教程中,我们将使用MJML构建漂亮的响应式邮件,并在多个邮件客户端上进行测试. 开始MJML 你可以使用npm安装MJML,以将其与Node.js或CLI结合使用: $ npm install -g mjml 构建我们的电子邮件 首先,请创建一个名为 email

随机推荐