<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue--计算/监听属性</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
<!-- 计算关键字computed。-->
<div id="app">
<p>原始字符串：{{message}}</p>
{{ message.split('').reverse().join('') }}<!--reverse倒退-->
<p>计算后的字符串：{{reversedMessage}}</p>
</div>

<!--conputed setter-->
<div id="setter">
<p>{{site}}</p>
</div>

<div id="methodcom">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>

<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>

</body>
<script type = "text/javascript">
<!--watch监听-->
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>

<script>
<!--computed与method比较-->
var cnt=1;
var vm = new Vue({
el: '#methodcom',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
cnt+=1;
return cnt+this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
cnt+=1;
return cnt+this.message.split('').reverse().join('')
}
}
})
</script>

<script>
var vm = new Vue({
el:'#setter',
data:{
name:'baidu',
url:'www.baidu.com'
},
computed:{
site:{
get:function(){
return this.name+''+ this.url
},
set:function(newVal){
var names=newVal.split(' ')
this.name=names[0]
this.url=names[names.length-1]
}
}
}
})

<!--从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时，-->
<!--setter 会被调用， vm.name 和 vm.url 也会被对应更新。-->
vm.site='xzcvsda http://www.360.com';
document.write('name:'+vm.name);
document.write('<br>');
document.write('url'+vm.url);
</script>

<script>
<!--提供的函数将用作属性 vm.reversedMessage 的 getter 。-->
<!--vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。-->
new Vue({
el:'#app',
data:{
message:"race"
},
computed:{
reversedMessage:function(){
return this.message.split('').reverse().join('')
}
}
<!--我们可以使用 methods 来替代 computed，效果上两个都是一样的，-->
<!--但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。-->
<!--而使用 methods ，在重新渲染的时候，函数总会重新调用执行。-->
})
</script>

</html>

vue----计算与监听属性的更多相关文章

  1. [vue]计算和侦听属性(computed&watch)

    先看一下计算属性 vue只有data区的数据才具备响应式的功能. 计算和侦听属性 - v-text里可以写一些逻辑 <div id="example"> {{ mess ...

  2. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Vue.js：监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  4. 简单vue的监听属性(单位换算)

    单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  6. Vue计算属性和监听属性

    一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...

  7. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  8. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  9. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  10. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

随机推荐

  1. 使用EXE4J和Inno Setup 编译器将java程序打包成windows桌面应用安装程序

    java项目结构如下: Demo是模仿程序快照,主要设计两个按钮:保存快照和恢复快照: 保存快照将对象(窗口)序列化保存下来,后面无论做了什么操作,只要点击恢复快照, 就会读取之前保存的序列化的对象. ...

  2. mysql 修改表字段长度

    方案一: change ALTER TABLE t1 CHANGE a a VARCHAR(); change 可以用来更改字段名称和类型 ALTER TABLE table_name CHANGE ...

  3. Android：JNI强化训练

    一.前言 Java本机接口(Java Native Interface (JNI))是本机编程接口,它是JDK的一部分,JNI它提供了若干的API,实现了和Java和其他通信(主要是C&C++ ...

  4. tfs增加用户

    1.windows上添加用户 2.tfs对应项目添加该用户 3.注意: 要设置服务器对应的本地安全策略   从网络上允许该用户访问

  5. Codeforces Round #551 (Div. 2) D. Serval and Rooted Tree (树形dp)

    题目:http://codeforces.com/contest/1153/problem/D 题意:给你一棵树,每个节点有一个操作,0代表取子节点中最小的那个值,1代表取子节点中最大的值,叶子节点的 ...

  6. js的观察者模式

    观察者模式(发布-订阅模式):它定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体 ...

  7. 一个简单可靠的CRC 计算程序

    //注:此函数主要的特点为准,快,体积小,非常适合于8位单片机 int16 crc_1021(int16 old_crc, int8 data) {   int16 crc;   int16 x;   ...

  8. 马凯军201771010116《面向对象与程序设计Java》

    实验十八  总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设 ...

  9. 运维ps语法---》ps、pstree、top、htop、nice、renice、kill、ulimit、w 和 who 和 whoami、pgrep、fg 和 bg、ipcs

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...

  10. 网易2019校招内推编程题-俄罗斯方块-C++实现

    [编程题] 俄罗斯方块 时间限制:1秒 空间限制:262144K 小易有一个古老的游戏机,上面有着经典的游戏俄罗斯方块.因为它比较古老,所以规则和一般的俄罗斯方块不同.荧幕上一共有 n 列,每次都会有 ...