详解vue 实例方法和数据


Posted in Javascript onOctober 23, 2017

1.vm.$set

问题描述:

如何在不通过循环数据给list数据添加一个showMore属性,并且在moreFun中改变这个新增属性的值,并实现双向绑定?

<template>
 <div id="app">
  <div class="demo">
   <ul>
    <template v-for="(v,index) in list">
     <li>{{v.name}}</li>
     <div v-show="!v.showMore">
      <button @click="moreFun(index)">展示更多</button>
     </div>
    </template>
   </ul>
  </div>
 </div>
</template>
<script>
export default {
 name: 'app',
 data() {
  return {
   list: [{
    name: '小颖'
   }, {
    name: '仔仔'
   }, {
    name: '黑妞'
   }, {
    name: '土豆'
   }]
  }
 },
 methods: {
  moreFun(index) {
   console.log(this.list);
  }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

一开始小颖并不知道怎么做,而且小颖觉得               

<div v-show="!v.showMore">
      <button @click="moreFun(index)">展示更多</button>
     </div>

这段代码肯定会报错,然而当小颖写上后发现,并没有,后来那位帅锅告诉我,看看vue的  vm.$set     小颖看后将moreFun方法写为:

moreFun(index) {
   this.$set(this.list[index], 'showMore', true);
   console.log(this.list);
  }

然后就达到小颖想要的结果啦。小颖当时遇到的问题类似于这样的:

<template>
 <div id="app">
  <div class="demo">
   <ul>
    <template v-for="(v,index) in list">
     <li>{{v.name}}</li>
     <div v-show="!v.showMore">
      <button @click="moreFun(index)">展示更多</button>
     </div>
    </template>
   </ul>
  </div>
 </div>
</template>
<script>
export default {
 name: 'app',
 data() {
  return {
   list: [{
    name: '小颖'
   }, {
    name: '仔仔'
   }, {
    name: '黑妞'
   }, {
    name: '土豆'
   }]
  }
 },
 mounted: function() {
  this.list.forEach(function(element, index) {
   element.showMore = false;
  });
 },
 methods: {
  moreFun(index) {
   this.list[index].showMore = true;
   console.log(this.list);
  }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

问题:当执行完moreFun方法后,虽然list中的showMore属性的值变成了true,但是

<div v-show="!v.showMore"> <button @click="moreFun(index)">展示更多</button> </div>

按钮 展示更多  仍然显示着,这是因为,如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

所以后来小颖就将showMore直接添加到list中,然后就好啦。现在想想其实用个vm.$set就解决啦。

2.vm.$watch

用法:

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。

注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

<template>
 <div id="app">
  <div class="demo">
   <input type="text" class="num1" v-model="num1">
   <label class="sign">-</label>
   <input type="text" class="num2" v-model="num2">
   <label class="sign">=</label>
   <label class="result">{{resultNum}}</label>
  </div>
 </div>
</template>
<script>
export default {
 name: 'app',
 data() {
  return {
   num1: 1,
   num2: 5,
   resultNum: null
  }
 },
 watch: {
  num1: function() {
   var _num1 = parseInt(this.num1);
   var _num2 = parseInt(this.num2);
   this.resultNum = _num1 - _num2;
  },
  num2: function() {
   var _num1 = parseInt(this.num1);
   var _num2 = parseInt(this.num2);
   this.resultNum = _num1 - _num2;
  }
 },
 mounted: function() {
  var _num1 = parseInt(this.num1);
  var _num2 = parseInt(this.num2);
  this.resultNum = _num1 - _num2;
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
input.num1,
input.num2 {
 width: 100px;
}
label.sign {
 font-size: 30px;
 vertical-align: -3px;
}
label.result {
 font-size: 20px;
}
</style>

3.vm.$delete

 用法:

这是全局 Vue.delete 的别名。

<template>
 <div id="app">
  <div class="demo">
   <ul>
    <template v-for="(v,index) in list">
     <li>{{v.name}}</li>
     <li>{{v.age}}</li>
     <button @click="deleteFun(index)">delete</button>
    </template>
   </ul>
  </div>
 </div>
</template>
<script>
export default {
 name: 'app',
 data() {
  return {
   list: [{
    name: '小颖',
    age:22
   }, {
    name: '仔仔',
    age:1
   }, {
    name: '黑妞',
    age:1
   }, {
    name: '土豆',
    age:1
   }]
  }
 },
 methods: {
  deleteFun(index) {
   this.$delete(this.list[index], 'age');
  }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

总结

以上所述是小编给大家介绍的vue 实例方法和数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
js瀑布流布局的实现
Jun 28 Javascript
深入浅析javascript继承体系
Oct 23 #Javascript
Vue.js组件通信的几种姿势
Oct 23 #Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 #Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 #Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 #Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 #Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 #Javascript
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP中的替代语法简介
2014/08/22 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python元字符的用法实例解析
2018/01/17 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
Internal修饰符有什么含义
2013/07/10 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
军训自我鉴定100字
2014/02/13 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
批评与自我批评总结
2014/10/17 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers