lovecoding
/
VIP24


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 插值 -->
    {{msg}}
    <h2>{{name}}</h2>
    <!-- html innerText -->
    <h2 v-text="name"></h2>
    <!-- html innerHTML -->
    <h2 v-html="name"></h2>

    <!--
      v-if 和 v-show的区别
    v-show 通过display 进行控制隐藏
    v-if  不会在html 里面 生成dom元素
    如果要频繁的切换或者显示隐藏  v-show
    -->
    <!-- v-show去控制隐藏 -->
    <p v-show="isLogin">已经登陆</p>
    <p v-show="!isLogin">未登录</p>
    

    <p v-if="a>b">hahahahahha</p>
    <p v-else-if="a==b">hehehehehhehe</p>
    <p v-else>xixixxixixi</p>


    <ul>
      <li v-for="val in arr">{{val}}</li>
    </ul>

    <ul>
      <li v-for="obj in arr2">{{obj.name}}</li>
    </ul>

    <ul>
      <li v-for="obj in arr2">{{obj.age}}</li>
    </ul>
  </div>
  <script src="vue.js"></script>
  <script>
    new Vue({
      //挂载元素
      el: '#app' ,
      //数据
      data:{
        msg:'next word',
        name: 'zhangsan',
        isLogin: true,
        a: 2,
        b: 2,
        arr: [1,2,3,4,5],
        arr2:[{
          name:'zs',age:18
        },{
          name:'lisi',age:20
        },{
          name:'ww',age:22
        }]
      }
    })
  </script>
</body>
</html>