学习vue.js计算属性

关于vue.js的计算属性练习代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs计算属性</title>
</head>
<body>
<!-- 字母反转方式一：不推荐
-->
<div id="app-1">
{{ message.split('').reverse().join('') }}
</div>
<!-- 字母反转方式二
-->
<div id="app-2">
{{ message2 }}
<!-- 注意{}内的内容如果是方法要加()
-->
<p>反转后的内容{{ reverseMessage2() }}</p>
</div>
<!-- 字母反转方式三 此方法在括号中没有方法()-->
<div id="app-3">
<p>原始{{message3}}</p>
<p>反转后{{ reverseMessage3 }}</p>
</div>
<!-- 方法二和方法三的区别在于methods会实时刷新数据 而computed会在第一次加载后会产生缓存-->

<!-- Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。 -->
<div id="app-4">
{{fullName}}
</div>
<!-- 另一种实现方式-->
<div id="app-5">
{{ fullname }}
</div>
<!-- 计算属性可以满足需求而且书写简便 为什么需要watch?
来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。 -->

<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>

Js文件

var app1=new Vue({
el: '#app-1',
data: {
message: 'Hello Ke'
},
})

var app2=new Vue({
el:'#app-2',
data:{
message2:'Hello Hou Hou'
},
methods: {
reverseMessage2: function () {
return this.message2.split('').reverse().join('')
}
}
});
var app3=new Vue({
el:'#app-3',
data:{
message3:'Zhou Er Ke'
},
computed:{
//a computed getter
reverseMessage3:function () {

return this.message3.split('').reverse().join('')
}
}
});
var app4 = new Vue({
el: '#app-4',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});
var app5=new Vue({
el:'#app-5',
data:{
firstName: 'Foo',
lastName: 'Bar',
},
computed:{
fullname:function () {
return this.firstName+' '+this.lastName
}
}
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js入门教程之计算属性

    前言 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 模板中表达式非常便利,但是它们实际上只用于简单的操作. 模板是为了描述视图的结构,在模板中放入太多的逻辑会让模板过重且难以维护. 这就是为什么 Vue.js 将绑定表达式限制为一个表达式, 如果需要多于一个表达式的逻辑,应当使用计算属性. 来看这一个简单的例子 <div i

  • Vue.js学习之计算属性

    前言 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 开始用vue会把所有的模版上的数据都放到data属性里,或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了,后来看到同组的同事在用computed属性,就又去查了一下api,发现这种情况其实最好用的就是computed. 1. computed

  • Vue计算属性的学习笔记

    本文为大家分享了Vue计算属性的学习笔记,供大家参考,具体内容如下 ①模板内的表达式实际上只用于简单的运算,对于复杂逻辑,使用计算机属性. ②基础例子: <div id = "example"> <p>Original message:"{{message}}"</p> <p>Computed reversed message:"{{reversedMessage}}"</p> <

  • Vue.js教程之计算属性

    Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接.如果涉及更复杂的逻辑,你应该使用计算属性. 计算属性是用来声明式的描述一个值依赖了其它的值.当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM.这个功能非常强大,它可以让你的代码更加声明式.数据驱动并且易于维护. 通常情况下,使用计算属性会比使用过程式的$watch回调更合适.比如下面的例子: <div id="demo">{{fullNa

  • Vue计算属性的使用

    我们都知道在Vue构造函数的参数对象中有一个[data]属性,该属性值是一个对象,该对象是对数据的代理,是一个键值对并且时刻与页面表现是一致的,但是这里面只能是简单的键值对,不能拥有业务逻辑,并且由于[data]中的属性属于同一个生命周期,所以如果我们需要某一个属性是依赖于另外一个属性时,在[data]中是做不到的,于是Vue为我们提供了[计算属性] 一.计算属性 1.1 概述 计算属性归根结底也是属性,它也是跟表现层是时刻同步的,虽然我们可以在插值中对数据进行各种处理,但是插值中的表达式处理毕

  • Vue.js第三天学习笔记（计算属性computed）

    Vue.js第三天学习笔记（计算属性computed）

    今天给大家分享下vue.js中的计算属性(computed) 示例一 computed的get属性 html: <template> <div class="input-text"> <input type="text" v-model='firstName'> <input type="text" v-model='lastName'> {{fullName}} </div> <

  • 学习vue.js计算属性

    关于vue.js的计算属性练习代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs计算属性</title> </head> <body> <!-- 字母反转方式一:不推荐 --> <div id="app-1&quo

  • 深入浅析Vue.js计算属性和侦听器

    一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方,模板不再是简单的声明式逻辑.你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串.当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理. 所以,对于

  • vue.js计算属性computed用法实例分析

    vue.js计算属性computed用法实例分析

    本文实例讲述了vue.js计算属性computed用法.分享给大家供大家参考,具体如下: 需求:数据msg值为12345,我们现在需要反向显示成54321. 在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> &l

  • Vue.js计算属性computed与watch（5）

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. Vue实例的computed的属性 <div class="test"> <p>原始的信息{{message}}</p> <p>计算后的信息{{ComputedMessage}}</p

  • 解决vue 更改计算属性后select选中值不更改的问题

    先上代码: //... <body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}</span>

  • vue中计算属性（computed）、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • Vue computed 计算属性代码实例

    什么是计算属性??? 1.在computed中,可以定义一些属性,这些属性叫做[计算属性] 2.计算属性的本质是一个方法,不过一般是将他们的名称直接当做属性使用,不会当方法调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue-2.4.0.js"></scri

  • 学习 Vue.js 遇到的那些坑

    学习 Vue.js 遇到的那些坑

    排名不分先后 最近好像都是只发了一些生活类,吐槽的一些 blog,不更新点技术相关的 可能有人会觉得 这家伙肯定又在偷懒了. 那么 好 我要开始装逼了 类空指向 就是类似于空指针的一种错误方式 不会在 console 上报错 非常难找的问题 resp.data.user.avatar //如果这个user是null的话 这么调用不会报错 也不会向下执行 非常坑 //如果你想判断这个avatar的话 要这么做 if(resp.data.user && resp.data.user.avata

  • 关于vue中计算属性computed的详细讲解

    关于vue中计算属性computed的详细讲解

    目录 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 附:计算属性的 getter 与 setter 总结 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下,computed默认使用的是getter属性 3.computed的响应式依赖(缓存) 1. computed的每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新.下面代码中,

  • Vue computed计算属性详细讲解

    Vue computed计算属性详细讲解

    目录 一.计算属性computed 1.1.什么是计算属性computed 1.2.复杂数据的处理-computed 1.3.计算属性的缓存 1.4.计算属性computed的setter和getter 一.计算属性computed 1.1.什么是计算属性computed computed 是基于它的依赖缓存,只有在它的相关依赖发生改变时才会进行更新.官方文档是这样说的:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性 1.2.复杂数据的处理-computed 拼接字符串.分数是否及格.m

随机推荐