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函数map()和each()介绍及异同点分析
Nov 08 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
JS模板实现方法
2013/04/03 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
Python中特殊函数集锦
2015/07/27 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
初三学习决心书
2014/03/11 职场文书
工程质量承诺书
2014/03/27 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
工会工作先进事迹
2014/08/18 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
体育教师研修感悟
2015/11/18 职场文书
2019年亲子运动会口号
2019/10/11 职场文书