Vue—实例成员computed和watch

Computed

一个变量依赖于多个变量

现在需要full_name这个变量以来于first_name和last_name这两个变量需要用到computed

好处：

1.相当于在computed中定义的变量值等于绑定的函数的的返回值，该变量无需再data中声明

2.在computed绑定的函数中所有的变量都会进行监听,只要写在里面就会被监听

<div id="app"><p>姓：<input type="text" v-model="first_name">名：<input type="text" v-model="last_name"></p><p>姓名：<b>{{ full_name }}</b></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {first_name:'',last_name:'',// full_name:'None'
        },computed:{full_name:function () {// let a =this.first_name;// let b =this.last_name;// console.log('尼玛');// return'123'return this.first_name+this.last_name}}})
</script>

watch

watch这个方法不是监听内部的,后方绑定的函数就是监听前方的变量，变量值改变，函数被调用，绑定的变量必须在data中声明

<div id="app"><p>姓名：<input type="text" v-model="full_name"></p><p>姓：<b>{{first_name}}</b>名：<b>{{last_name}}</b></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el: '#app',data: {full_name:'',first_name:'',last_name:''},watch:{//1.后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
            full_name:function () {let res = this.full_name.split('');this.first_name = res[0];this.last_name = res[1]}}})
</script>

转载于:https://www.cnblogs.com/zhengyuli/p/11099000.html

Vue—实例成员computed和watch相关推荐

vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
05Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
面试题： Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
vue 生命周期_深入理解Vue实例生命周期
‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...
vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue ...
Vue中的computed属性
1.前言本篇是Vue中最常用到的API之一computed属性,转载信息如下: 作者:gunelark 链接:https://www.cnblogs.com/gunelark/p/8492468.h ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...

Vue—实例成员computed和watch

Computed

watch

Vue—实例成员computed和watch相关推荐

最新文章

热门文章