码迷,mamicode.com
首页 > 其他好文 > 详细

vue-5

时间:2019-10-22 20:41:34      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:UNC   --   data   computed   cdn   lang   今天   set   http   

<!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>

 

vue-5

标签:UNC   --   data   computed   cdn   lang   今天   set   http   

原文地址:https://www.cnblogs.com/aomeng/p/11721902.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!