lovecoding
/
VIP22


			
				
					
						
						
							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="msg"></h2>

    <!-- v-show 和 v-if 的区别 -->
    <!-- 
      show 通过 display:none 
      if  不会再html里面生成dom
      频繁的显示隐藏  v-show
    -->
    <!-- v-show显示隐藏  display:none    block -->
    <p v-show="isLogin">已登录</p>
    <p v-show="!isLogin">未登录</p>

    <p v-if="a<b">hahahhahha</p>
    <p v-else-if="a==b">lolololololo</p>
    <p v-else="a>b">xixixixxixi</p>

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

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