详解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 相关文章推荐
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
innerText 使用示例
Jan 23 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
js前端图片加载异常兜底方案
Jun 21 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
Terran魔法科技
2020/03/14 星际争霸
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
python字典多条件排序方法实例
2014/06/30 Python
Python字符串格式化
2015/06/15 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Python PIL图片添加字体的例子
2019/08/22 Python
使用python模拟高斯分布例子
2019/12/09 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
如何利用find命令查找文件
2015/02/07 面试题
企业治理工作自我评价
2013/09/26 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
代领报检证委托书范本
2014/10/11 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书