Vue常用指令

Vue常用指令：

一、v-bind（绑定数据，用于某个HTML标签中属性值的更新）

<div id="app">
    <a v-bind:href="url">百度一下</a>
    <!-- <a  :href="url">百度一下</a> -->
</div>
<script>
    new Vue({
      el: "#app",
      data: {
        url: "http://www.baidu.com"
      }
    })
</script>

二、v-if v-else使用

<div v-if="Math.random() > 0.5">结果大于0.5</div>
<div v-else>结果小于0.5</div>

三、v-model双向绑定

  <div id="app">
      {{phone}}
      <br>
      <input type="text" v-model="phone">
  </div>
  <script>
      new Vue({
        el:"#app",
        data:{
            phone:"131935"
        }
      })
  </script>

四、v-on事件绑定

  <div id="app">
      {{str}}
      <br>
      <button @click="show">点击</button>
  </div>
  <script>
      new Vue({
        el:"#app",
        data:{
           str:"你好"
        },
        methods:{
          show(){
            // this 就是当前vue对象 
            this.str = "大家好"
          }
        }
      })
  </script>

五、v-for循环

  <div id="app">
      <!-- 循环div -->
      <div v-for="p in products">
        {{p.name}}
   </div>

      <hr>
      <!-- 有序标签 -->
      <ol>
        <li v-for="p1 in products">
          {{p1.name}}
        </li>
      </ol>
      <hr>
      <!-- 无序标签 -->
      <ul>
        <li v-for="p2 in products">
          {{p2.name}}
        </li>
      </ul>
    </div>
  <script>
      new Vue({
        el:"#app",
        data:{
          // 提供一个集合数据
          products:[
            {name:"iphone20"},
            {name:"小米11青春版"},
            {name:"华为mate80"}
          ]
        },
        methods:{
         
        }
      })
  </script>

---