<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>
<script>
// 如何实现名字一起输出?
var vm = new Vue({
el:'#app',
data: {
fName: 'L',
lName: 'XQ',
fullName: 'LXQ',
age: 21
},
// 侦听器(侦听指定变量的变化,能缓存)
watch:{
fName: function(){
this.fullName = this.fName + this.lName;
},
lName: function(){
this.fullName = this.fName + this.lName;
}
}
// 计算属性(能缓存,当依赖的值变化时才重新计算)
// computed:{
// fullName: function(){
// return this.fName + this.lName;
// }
// }
// 方法(不能缓存,只要页面重新渲染,方法就会被执行)
// methods: {
// fullName: function(){
// return this.fName + this.lName;
// }
// }
})
</script>
</body>
</html>
Vue 2-计算属性,方法,侦听器
最新推荐文章于 2024-03-14 01:46:18 发布