! 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 Document / title script src ="https://cdn.boo
<!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>Document</title> <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>