1.属性计算
代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>
{{message}}
</p>
<!-- 插值表达式中可以进行运算， -->
<p>
{{message.split(' ').reverse().join(' ')}}
</p>
<!-- 计算属性的使用方法和data中的数据一致 -->
<p>{{msg}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vue=new Vue({
el:'#app',
data:{
message:'hello vue.js'
},
//计算属性(有两种函数)，主要处理data中的数据
computed:{
msg(){
var array=this.message.split(' ');
array.reverse();
//计算属性中的函数必须有返回值
return array.join(' ');
}
}
});
</script>
</body>
</html>2.侦听器
代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="name">
</p>
<p>{{name}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
message:'hello vue.js',
name:''
},
//侦听器：监听data数据的变化
watch:{
/**
* 侦听函数
* 名称：与侦听的数据名称保持一致
* 参数1：数据变化之后的值 参数2：数据变化之前的值
*/
name:function(newVal,oldVal){
console.log('新数据:',newVal);
console.log('老数据:',oldVal);
}
}
});
</script>
</body>
</html>
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
