vue中的计算属性的使用和vue实例的方法示例


Posted in Javascript onDecember 04, 2017

本文介绍了vue计算属性的使用和vue实例的方法示例,分享给大家,具体如下:

计算属性

在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。

vue 计算属性

当我们想要根据一端业务代码的执行结果来返回属性的值,就可以使用计算属性computed了,

计算属性是一个有结果的函数,有get方法和set方法,get方法,必须有返回值必须有返回值

<script src="lib/vue.js"></script> 
 
<body> 
<div id="box"> 
  a = >{{a}} 
  b = > {{b}} 
</div> 
</body> 
<script> 
  var vm = new Vue({ 
    el:'#box', 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:function () { 
        //业务代码 
        return this.a+1; 
      } 
    } 
  }); 
  /**这样直接改属性的值不行的,需要调用计算属性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
  }; 
</script>

计算属性的set/get方法:

<script src="lib/vue.js"></script> 
 
<body> 
<div id="box"> 
  a = >{{a}} 
  b = > {{b}} 
</div> 
</body> 
<script> 
  var vm = new Vue({ 
    el:'#box', 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:{ 
        get:function () { 
          return this.a+1; 
        }, 
        set:function(val){ 
          this.a = val; 
        } 
      } 
    } 
  }); 
  /**这样直接改属性的值不行的,需要调用计算属性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
    //默认调用计算属性的set方法 
  }; 
</script>

vue实例的简单方法

vm 是创建的vue实例对象的名字

vm.$el  ->  就是元素

vm.$data  ->  就是data

vm.$mount ->  将vue对象挂载在节点对象上

举个例子:

var vm2 = new Vue({ 
    data:{}, 
    methods:{} 
  }).$mount('#box');

等同于:

var vm2 = new Vue({ 
    el:'#box', 
    data:{}, 
    methods:{} 
  });

vm.$options ->   获取自定义属性,自定义方法

vue实例可以自定义属性和方法,如果需要调用就需要$options调用,举例如下:

var vm2 = new Vue({ 
   aa:'1',//自定义属性 
   show:function () { 
     alert(1); 
   }, 
   el:'#box', 
   data:{}, 
   methods:{} 
 }); 
 vm2.$options.show(); 
 console.log(vm2.$options.aa);

vm.$destroy ->   销毁对象

vm.$log();  ->  查看现在数据的状态

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery函数的等价原生函数代码示例
May 27 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
基于form-data请求格式详解
Oct 29 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 #Javascript
微信小程序tabBar用法实例详解
Dec 04 #Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 #Javascript
浅谈React和Redux的连接react-redux
Dec 04 #Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 #Javascript
深入浅出webpack之externals的使用
Dec 04 #Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 #Javascript
You might like
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
nodejs基础知识
2017/02/03 NodeJs
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python类继承用法实例分析
2014/10/10 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python机器学习之神经网络(三)
2017/12/20 Python
python交换两个变量的值方法
2019/01/12 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
大学毕业感言50字
2014/02/07 职场文书
红旗方阵解说词
2014/02/12 职场文书
作文批改评语大全
2014/04/23 职场文书
ktv好的活动方案
2014/08/17 职场文书
国庆横幅标语
2014/10/08 职场文书
捐助感谢信
2015/01/22 职场文书
先进个人自荐书
2015/03/06 职场文书
教学副校长工作总结
2015/08/13 职场文书