vue-5

<!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>
相关文章
相关标签/搜索