<!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>
</head>
<body>
<div id='app'>
<input type="text" v-model="score">
<p>{{returnTip}}</p>
<!-- <p v-if="score>90">你真优秀</p>
<p v-else-if="score>70">一般般</p>
<p v-else>你要努力了</p> -->
<!-- 计算属性
它是放在computed里面
计算属性本质是一个函数
它的结果就是它return的值
它可以当属性使用
使用场景:依赖一个或者多个值而产生一个新的值
它的结果是实时响应的
-->
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
score: 100
},
computed: {
returnTip() {
if (this.score > 90) {
return '你真优秀'
} else if (this.score > 70) {
return '一般般'
} else {
return "你要努力了!"
}
}
}
})
</script>
</body>
</html>
// 侦听器,数据发生改变,就调用相关函数
watch: {
"$route.query.search"() {
this.getList();
},