methods实现
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstName" /> 名:
<input type="text" v-model="lastName" /> 姓名:
<!-- <span>{{firstName.slice(0,3)}}-{{lastName.slice(0,10)}}</span> -->
<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
},
methods: {
fullName() {
console.log('@---')
return (
this.firstName.slice(0, 3) +
'-' +
this.lastName.slice(0, 10)
)
},
},
})
</script>
</html>
测试演示
计算属性实现
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstName" /> 名:
<input type="text" v-model="lastName" /> 姓名:
<span>{{fullName}}</span><br /><br />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
},
computed: {
fullName: {
//当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时
get() {
console.log('get被调用')
// 这里的this指的是vm
return this.firstName + '-' + this.lastName
},
//get什么时候调用?当fullName被修改时
set(value) {
console.log('set', value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
},
},
},
})
</script>
</html>
测试演示
讲师笔记
计算属性(简写源码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstName" /> 名:
<input type="text" v-model="lastName" /> 姓名:
<span>{{fullName}}</span><br /><br />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
},
computed: {
// fullName: {
// get() {
// console.log('get被调用')
// // 这里的this指的是vm
// return this.firstName + '-' + this.lastName
// },
// set(value) {
// console.log('set', value)
// const arr = value.split('-')
// this.firstName = arr[0]
// this.lastName = arr[1]
// },
// },
fullName() {
console.log('get被调用了')
return this.firstName + '-' + this.lastName
},
},
})
</script>
</html>
思考
什么时候使用fullName 什么时候使用 fullName()