DOCTYPE html>
<html lang="zh">
<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>Documenttitle>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
head>
<body>
<div id="app">
{{ag}}---------{{fanzhuan}}-----------{{fan()}}-------{{h}}
<button @click="denglu()">登录button>
<hr />
今天的温度是：{{weidu}}℃
衣服：{{yifu}}
<br />
<button @click="add()">升温button>
<button @click="res()">降温button>
div>
body>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
ag:'hellow',
count:0,
weidu:15,
yifu:"衬衫",
},
/*计算属性*/
computed:{
fanzhuan:function(){
return this.ag.split('').reverse().join('');/* split 分割字符串 reverse 反转 join 再次组成字符串*/
},
h:function(){
return this.count==1?"已登录":"未登陆";//判断count是否为1
},
},
/*方法*/
methods:{
fan:function(){
return this.ag.split('').reverse().join('');
},
denglu:function(){
this.count=1; //登录方法
},
add:function(){
this.weidu+=5;
},
res:function(){
this.weidu-=5;
},
},
watch:{
weidu:function(newval,oldval){
if (newval >20) {
this.yifu="短袖";
}
else if(newval<20 && newval>0){
this.yifu="衬衫";
}
else{
this.yifu="羽绒服";
}
}
}
});
script>
html>
