标签：vue firstname lastname isHot day3 vm Vue fullname
1.计算属性
1.1姓名案例，插值语法实现
当改变姓和名的时候，姓名跟着一起改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
姓名：<span>{{''+firstname+lastname}}</span>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
}
})
</script>
</body>
</html>
1.2姓名案例，方法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
<!-- fullname的话就是将这个函数代码插入，fullname（）就是将函数的返回值插入，差别是比较大的，绑定事件的函数里面，有没有括号都一样，但是这里不一样-->
姓名：<span>{{fullName()}}</span>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三'
},
methods:{
fullName(){
// 这个vm.是不可以的，因为这是在初始化之前进行，这里面的就是初始化的内容
// return vm.firstname+vm.lastname;
return this.firstname+this.lastname;
}
}
})
</script>
</body>
</html>
1.3姓名案例，计算属性实现
-
fullname的话就是将这个函数代码插入，fullname（）就是将函数的返回值插入，差别是比较大的，绑定事件的函数里面，有没有括号都一样，但是这里不一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
<!-- fullname的话就是将这个函数代码插入，fullname（）就是将函数的返回值插入，差别是比较大的，绑定事件的函数里面，有没有括号都一样，但是这里不一样-->
姓名：<span>{{fullname}}</span>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
//vue认为data中的东西都是属性
data:{
firstname:'张',
lastname:'三'
},
methods:{
fullName(){
// 这个vm.是不可以的
// return ''+vm.firstname+vm.lastname;
return this.firstname+this.lastname;
}
},
//自己理解：计算属性就是将data中的东西进行一定的计算与配置
computed:{
//因为计算属性的过程比较复杂，所以要求将计算属性的过程配置为一个对象
fullname:{
//当有人读取fullname时，get就会被调用，且返回值作为fullname的值
//get什么时候调用？1.初次读取fullname时 2.所依赖的数据发生变化
//和计算属性相比，只要第一次调用会调用get，然后就会缓存，多次调用该函数时可以直接用
get(){
return this.firstname+'-'+this.lastname;
},
//set什么时候调用？1.修改fullname时
//要求：将读取过来的姓名拆成姓和名
set(value){
const arr = value.split('-');
this.firstname = arr[0];
this.lastname = arr[1];
}
}
}
})
</script>
</body>
</html>
1.4计算属性简写方式
只有当计算属性只读不改的时候才可以用简写方式，也就是我们上面1.2个例子，只进行姓名的显示，并没有用到set方法
//简写前提，只有get，没有set，只读不改
computed:{
fullname(){
return this.firstname+'-'+this.lastname;
}
}
2.监视属性
2.1天气案例
-
点击切换天气
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天的天气很{{ifHot}}</h2>
<button type="button" @click="changebit">按键切换天气</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
isHot:true
},
methods:{
changebit(){
//每点击一次取反
this.isHot = !this.isHot;
}
},
//要注意，这里的ifhot（）并不是一个方法，而是一个对象，只是可以这么简写
computed:{
ifHot(){
return this.isHot?'炎热':'凉爽';
}
}
})
</script>
</body>
</html>
2.2天气案例用监视属性写
2.2.1将watch写在vue内和vue外
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天的天气很{{ifHot}}</h2>
<button type="button" @click="changebit">按键切换天气</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
methods:{
changebit(){
//每点击一次取反
this.isHot = !this.isHot;
}
},
//要注意，这里的ifhot（）并不是一个方法，而是一个对象，只是可以这么简写
computed:{
ifHot(){
return this.isHot?'炎热':'凉爽';
}
},
//监测属性，监视谁就写谁的名字
// watch:{
// isHot:{
// //1.handler什么时候被调用，当监视的属性被修改的时候
// //2.还能将修改之前的值和修改之后的值给我
// // 2.1handler(x,y){
// // console.log('ishot被修改了',x,y);
// // }
// // 结果就是ishot被修改了 false true
// //3.除了handler配置还有其他配置imediateimmediate:true,
// // 3.1初始化是让handler调用一下
// //4.计算出来的也是属性，computed里面的呢东西也能监视
// immediate:true,
// handler(x,y){
// console.log('ishot被修改了',x,y);
// }
// }
// }
})
//这样子写也可以
// vm.$watch('isHot',{
// immediate:true,
// handler(x,y){
// console.log('ishot被修改了',x,y);
// }
// })
</script>
</body>
</html>
2.2.2注意事项
标签：vue,firstname,lastname,isHot,day3,vm,Vue,fullname 来源： https://www.cnblogs.com/raoxin/p/16217048.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。