vue中的计算属性的使用和vue实例的方法示例
更新时间：2017年12月04日 11:13:47 作者：再起一阵风
本篇文章主要介绍了vue计算属性的使用和vue实例的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了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(); -> 查看现在数据的状态
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue组件通信方式(父传子、子传父、兄弟通信)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了关于vue列表数据删除后主动刷新页面及刷新方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
本文主要介绍了Vue出现弹出层时禁止底部页面跟随滑动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
Vue中使用Element UI的Table组件实现嵌套表格功能
这篇文章主要介绍了Vue中使用Element UI的Table组件实现嵌套表格功能,演示如何在Vue中使用Element UI的Table组件实现嵌套表格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue框架的优秀设计和强大的生态系统成为了越来越多开发者选择Vue的原因,在实际项目过程中一个高效的开发环境能够大大提高开发效率,这篇文章主要给大家介绍了关于vscode搭建vue环境的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue 中使用 this 更新数据的一次大坑 ,我在 vue 实例中声明了一个数组属性如 books: []，在异步请求的回调函数中使用 this.books = res.data.data; 进行数据更新，感兴趣的朋友跟随小编一起看看吧2022-11-11
echarts.js 动态生成多个图表 使用vue封装组件操作
这篇文章主要介绍了echarts.js 动态生成多个图表 使用vue封装组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
defineProps是Vue3中的一种新的组件数据传递方式,可以用于在子组件中定义接收哪些父组件的props,这篇文章给大家介绍vue3中defineProps及使用方法详解,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了vue的url请求图片的问题及请求失败解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
最新评论