精华内容
下载资源
问答
  • 1、防止事件冒泡 <button @click.stop="print('button')">点我试试啊</button> 2、防止页面跳转 <a href="http://www.baidu.com" @click.prevent ="print('我...3、计算属性和watch属性 cons...

    1、防止事件冒泡

     <button @click.stop="print('button')">点我试试啊</button>

    2、防止页面跳转

    <a href="http://www.baidu.com" @click.prevent ="print('我是百度')">百度一下,你就知道</a>

    3、计算属性和watch属性

    const app=new Vue({
           el:"#app",
           data:{
                num:1,
               isRed:true,
                birthday:152903215210,
               person:{
                    name:"Jack",
                    age:12
               }
           },
           computed:{
               birth(){
                    const day=new Date(this.birthday);
                    return day.getFullYear()+"年"+day.getMonth()+"月"+day.getDay()+"日";
               }
           },
           watch:{
               num(val,oldval){
                   console.log(val,oldval)
               },
               person:{
                   deep:true,
                   handler(val) {
                        console.log(val.age)
                   }
               }
           }
       });
       <h1>
            您的生日:{{birth}}
        </h1>
        <!-- watch-->
        <input type="text" v-model="num">
        <h1>num:{{num}}</h1>

     

    展开全文
  • 1. <body> <div id="app"> <h1>您生日是:{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay() }...

    1.

    <body>
        <div id="app">
            <h1>您的生日是:{{
                new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
                }}
            </h1>
            <h1>您的生日是:{{birth()}} </h1>
            <h2>{{name}},非常帅!!!</h2>
        </div>
    </body>
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        // 创建vue实例
        var app = new Vue({
            el:"#app", // el即element,该vue实例要渲染的页面元素
            data:{ // 渲染页面需要的数据
                name: "峰哥",
                birthday:1529032123201 // 毫秒值
            },
            methods:{
                birth(){// 计算属性本质是一个方法,但是必须返回结果
                    const d = new Date(this.birthday);
                    return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
                }
            }
        });
    
    </script>

    2.计算属性

    计算属性本质就是方法,但是一定要返回数据。然后页面渲染时,可以把这个方法当成一个变量来使用。

    computed:{
        birth2(){// 计算属性本质是一个方法,但是必须返回结果
            const d = new Date(this.birthday);
            return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
        }
    }
    <h1>您的生日是:{{birth2}} </h1> 这个时候不用加括号表示函数

    3.watch监听

    <div id="app">
        <input type="text" v-model="message">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                message:""
            },
            watch:{
                message(newVal, oldVal){
                    console.log(newVal, oldVal);
                }
            }
        })
    </script>

    展开全文
  • vue计算属性和watch的区别

    万次阅读 2018-03-14 10:23:37
    学习vue框架,一定少不了学习计算属性computed和watch computed计算属性是用来声明式描述一个值依赖了其它值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖任何值导致该计算属性改变时更新 ...

    学习vue框架,一定少不了学习计算属性computed和watch
    computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。
    watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。

    <div>{{Name}}</div>
    data(){
    return {
    num:0,
    lastname:'',
    firstname:'',
    }
    }
    //当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值
    watch:{
    num:function(val,oldval){
        console.log(val,oldval);
    }
    },
    //计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
    computed:{
        Name:function(){
            return this.firstname+this.lastname;
        }
    }
    展开全文
  • 这里写自定义目录标题计算属性computed和watch的区别两者主要区别验收一下 计算属性computed和watch的区别 通俗来说既能实现computed又能够实现watch推荐使用computed,重点在于computed缓存功能。computed...

    计算属性computed和watch的区别

    通俗的来说既能实现computed又能够实现watch的推荐使用computed,重点在于computed的缓存功能。computed是用来声明式的描述一个值依赖其它的值,当所有依赖的值或者变量改变的时候,计算属性也会随着该变;watch主要是监听data里面的定义的量,当该变量变化的时候,触发watch

    两者的主要区别

    1. 计算属性的依赖值改变会重新执行函数,计算属性是取返回值来作为最新的结果,所以里面不能异步的返回结果(一定要多注意,吃的亏越多,越明白它的重要性),不能写异步逻辑
    2. watch函数的值改变watch重新执行,将一个值重新赋值作为最新结果,所以赋值的时候可以进行一些异步操作。

    验收一下

    <div id="app">
    	{{msg}}
    </div>
    <div>
    	{{newValue}}
    </div>
    <button @click="handleClick">点击</button>
     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
     <script>
    	let vm = new Vue({
    		el: "#app",
    		data:{
    		msg: "hello",
    		newValue:""
    		},
    		methods:{
    			handleClick(){
    				this.msg="hello1"
    			}
    		},
    		watch:{
    			msg(newValue){
    				setTimeout(()=>{
    					this.newValue=newValue
    				}, 1000);
    			}
    		}
    	})
    </script>
    

    使用计算属性则无法在里面写一些逻辑

    <div id="app">
    	{{msg}}
    </div>
    <div>
    	{{newValue}}
    </div>
    <button @click="handleClick">点击</button>
     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
    <script>
    	let vm = new Vue({
    		el:"#app",
    		data:{
    			msg:"hello",
    			temp:""
    		},
    		computed:{
    			newValue(){
    				if(this.temp){
    					// 不能写异步的代码
    					// setTimeout(()=>{
    					//		return msg
    					//	}, 1000)
    					return this.mag
    				},else{
    					return this.temp
    				}
    			}
    		},
    		methods:{
    			handleClick(){
    				this.msg="hello1",
    				this.temp="hello1"
    			}
    		}
    	})
    </script>
    
    展开全文
  • vue computed计算属性和watch监听事件

    千次阅读 2019-05-15 19:31:49
    1、计算属性适用情形 我们可能会有这样需求,一个数据属性在它所依赖属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性。 例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余...
  • computed计算属性 计算属性类似于方法,用于输出data中定义属性数据结果,data数据变化时,计算属性的结果会同步变化,需要注意计算属性不可与data定义属性同名。 相比于方法它优势是只有当依赖属性...
  • vue计算属性和watch的区别 学习vue框架,一定少不了学习计算属性computed和watch computed计算属性是用来声明式描述一个值依赖了其它值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖任何值...
  • vue 计算属性和watch

    2021-06-07 16:11:47
    computed适合处理场景是,一个数据属性在它所依赖属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性,computed是带缓存,只有其引用响应式属性(属性绑定)发生改变时才会重新计算(如果引用...
  • computed和watch的异同 不同点: 触发条件不同 computed计算属性会依赖于它data属性,只要是依赖data属性有变动话,则自定义重新调用计算属性执行一次 watch则是在监控data属性值发生变化时候,其余会自动...
  • Vue计算属性computed侦听属性watch的区别 1、计算属性:computed (1)使用场景: 模板中表达式常用于简单运算,当模板中表达式过长或者其逻辑复杂时,会难以维护,计算属性就是解决该类问题 (2)用法: ...
  • computed和watch的区别 watch是监听属性,监听data或者watch里面数据变化,根据当前不同值情况,做出不同处理。 <script> export default { name: "JobDataUpdate", data(){ return {
  • 我们知道,在Vue中,可以通过一个计算属性和watch函数来监听某个数据属性变化,但这两者有一定差别。在这里就做一下简要探讨。 1、计算属性适用情形 我们可能会有这样需求,一个数据属性在它所依赖属性...
  • computed 属性值会默认走缓存,计算属性是基于它们响应式依赖进行缓存,也就是基于data中声明过或者父组件传递props中数据通过计算得到值 如果一个属性是由其他属性计算而来,这个属性依赖其他属性,...
  • 1 <template> 2 <div> 3 this is A.vue <br> 4 <!--计算属性--> 5 <label for="msg">输入message:</label> 6 <input type="text...
  • computed适合处理场景是,一个数据属性在它所依赖属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性,computed是带缓存,只有其引用响应式属性(属性绑定)发生改变时才会重新计算(如果引用...
  • 计算属性,依赖其他属性计算值,并且computed值有缓存,只有当计算值变化才会返回内容。 例子: data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this....
  • computed:通过属性计算而得来的属性 1、computed内部函数在调用时不加()。 2、computed是依赖vm中data的属性变化而变化,当data中的属性发生改变时候,当前函数才会执行,data中的属性没有改变时候,当前...
  • 1,计算属性computed: 计算属性是自动监听依赖值变化,从而动态返回内容,监听是一个过程,在监听值变化时,可以触发一个回调,并做一些事情。它有以下几个特点: ...计算属性由两部分组成:gets...
  • 计算属性computed(可以关联多个实时计算对象) : 支持缓存,只有当数据再次改变时才会重新渲染,否则就会直接拿取缓存中数据 不支持异步,当computed内有异步操作时无效,无法监听数据变化 3.computed 属性...
  • html <div id="app"> <div>{{firstName + " " + lastName}}</div> </div>... var app = new Vue({ el:'#app', data:{ firstName:"Min", lastName:"Box" } }...
  • vue的计算属性computed侦听器watch都是监听数据变化。 computed (计算) 其在vue单文件组件中就是对数据进行简单的一些逻辑计算,在项目开发中方便我们对原始数据处理。重要的是计算属性基于它的响应式依赖进行...
  • vue计算属性(computed)监听器(watch)区别 总结: 1.计算属性可以防止监听属性滥用,但一些异步请求,计算属性做不到,还得watch来完成。 2.计算属性有缓存
  • 1、计算属性的特点 2、计算属性的原理 3、computed与methods区别 二、侦听器(wacth) 1、侦听器特点 2、使用 wacth 注意事项 3、wacth 两个属性 4、watch 与 $watch 关系 5、watch 使用案例 ...
  • vue的计算属性和监视

    2019-11-13 12:13:56
    在 computed 属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算结果 二、监视属性 通过通过 vm 对象$watch()或 watch 配置来监视指定属性 当属性变化时, 回调函数自动调用, 在函数内部进行...
  • 由两部分组成:get和set,分别用来获取计算属性和设置计算属性。默认只有get,如果需要set,要自己添加。另外set设置属性,并不是直接修改计算属性,而是修改它依赖: computed: { fullName: { // getter get:...
  • 计算属性用来声明一个值依赖于另一个值,计算属性是基于它们响应式依赖进行缓存。只在相关响应式依赖发生改变时它们才会重新求值。如果不发生改变,那么计算属性将会从缓存中读取值。计算属性不能计算在data中...
  • 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算结果 2.监视属性: (注意:要对变化对象进行监视.监视有两种方式) 通过通过vm对象$watch()或watch配置来监视指定属性 当属性...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 840
精华内容 336
关键字:

vue的计算属性和watch

vue 订阅