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 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
Javascript入门学习资料收集整理篇
Jul 06 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python最小二乘法矩阵
2019/01/02 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
详解Django配置JWT认证方式
2020/05/09 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
物流管理专业毕业生自荐信
2014/03/04 职场文书
保护动物倡议书
2014/04/15 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
大学生入党自荐书
2015/03/05 职场文书
签证工作证明模板
2015/06/15 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
2016小学新学期寄语
2015/12/04 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
初中政治教学反思
2016/02/23 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
yolov5返回坐标的方法实例
2022/03/17 Python
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android