<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            color: red;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>v-pre</h2>
    <h2 v-pre="msg">{{msg}}</h2>
    <h2 v-once>{{msg}}  v-once 不能改变</h2>
    <input type="text" v-model="msg"><br>
    <em>{{msg}}</em>
    <h2>v-bind</h2>
    <h2 v-bind:class="g">V-bind  demo</h2>
    <h2 v-bind:class="{red:off}">接收判断条件</h2>
    <h2 v-bind:class="{r,g}">{r:r, red:red}</h2>
    <h2 :class="[r,g]">绑定数组</h2>
    <h2 :class="off ? 'red':'green'">三元表达式</h2>
   <!--把数据插入到APP作用域下，需要用到插值符号{{  }}  ${变量}-->
    <h2>得分:{{num}}</h2>
    <button v-on:click="jia">加一分</button><br>
    <button @click="jian">减一分</button><br>
    <input v-on:keyup.13="onEnter" value="回车键"/>
    <input v-on:keyup.enter="onEnter" value="回车键"/>
    {{msg}}
    <h2 v-text="vText"></h2>
    <h2 v-text="vText2"></h2>
    <h2 v-html="vText2"></h2>
    <h2 v-show="isShow">{{vText2}}</h2>
    <hr>
    <h2>v-if 没有dom</h2>
    <div v-if="isLogin">请输入你的用户名</div>
    <div v-else="isLogin">用户名:姚辉乾</div>
    <hr>
    <h2>v-for循环</h2>
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
    <hr>
    <h2>显示前三行</h2>
    <ul>
        <li v-for="(item,index) in arr" :key="index" v-if="index<3"> {{index}}+++{{item}}</li>
    </ul>
    <h2>循环显示对象</h2>
    <ul>
        <li v-for="(item,index) in uesr" :key="index" v-if="index<3"> {{index}}+++{{item.name}}+++{{item.age}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(value,key,index) in uesra" >
            value:{{value}},
            key:{{key}},
            index:{{index}}
        </li>
    </ul>
    <h2>循环sortArr
    </h2>
    <ul>
        <li v-for="site in sortArr">{{site}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    // MVVM
    new Vue({
      el:"#app",
        data:{  //请求过来的数据，都会放到data里面
          msg:'helloworld',
            r:'red',
            g:'green',
            off:false,
            vText:'姚辉乾',
            vText2:'<em>姚辉乾</em>',
            isShow:true ,
            isLogin:false ,
            arr:[123,456,789,123456,789456,123123],
            uesr:[
                {name:'姚辉乾1',age:20},
                {name:'姚辉乾2',age:21},
                {name:'姚辉乾3',age:22},
                {name:'姚辉乾4',age:23}
            ],
            uesra:{
              name:'追梦',
                age:'222',
                home:'菏泽'
            },
            num:0

        },
        computed:{//计算属性，实时更改  用js的sort排序
            sortArr:function(){
                console.log("yhq")
                console.log(this.arr)
                return this.arr.sort(function(a,b){
                    //  return a-b;//从小到大
                    return b-a;//从小到大
                })
            }
        },
        methods:{
              jia() {
                  this.num++;
              },
            jian() {
                this.num--;
            },
            onEnter(){
                  this.num++;
            }
        }
    });
</script>

</body>
</html>