lovecoding
/
class


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!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">
    {{message}}
    <h2>{{name}}</h2>
    <!-- v-text -->
    <h2 v-text="name"></h2>
    <!-- v-html -->
    <h2 v-html="name"></h2>


    <!-- v-if  v-else -->
    <div v-if="bol">
      显示1
    </div>
    <div v-else>
      显示2
    </div>
    <div v-show="bol">
      显示11111
    </div>
    <!-- v-if  和  v-show的区别   -->
    <!-- v-if 通过判断条件来 控制元素的显示隐藏  如果不满足条件  不会被解析 -->
    <!-- v-show 通过判断条件来控制元素的显示隐藏  但是如果不满足条件  也会被解析  添加样式 dispaly: none -->


    <!-- v-for -->
    <!-- for(var i=0;i<arr.length;i++)    arr[i] -->
    <!-- <p v-for="val in arr">{{val}}</p> -->

    <h3 v-for="per in person">{{per.name}}</h3>


  </div>
  <script src="vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'hello word',
        name: 'zhang san',
        bol: false,
        arr: [1, 2, 3, 4, 5, 6],
        person: [{
          name: 'zs',
          age: 20
        }, {
          name: 'lisi',
          age: 18
        }]
      }
    })
  </script>
</body>

</html>