vue快捷鍵與基礎指令詳解

更新時間：2017年06月01日 15:59:18 作者：qq_36947128

這篇文章主要介紹了vue快捷鍵與基礎指令詳解,需要的朋友可以參考下

v-bind可以簡寫成：

<img src="{{url}}">→<img :src="url" :width="50px">
v-on:click可以寫成@click
<button @click="up()"></button>

v-if實例可以通過對對象操作條件來實現想要展示的效果

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <p v-if="seen">現在你看到我了</p> 
      <template v-if="ok"> 
        <h1>天氣炎熱</h1> 
      </template> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          seen:false, 
          ok: true 
        } 
      }) 
    </script> 
  </body> 
</html>

v-for實例：v-for是可以做循環(huán)數組使用的

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <ol> 
        <li v-for="x in lists">{{x.title}}</li> 
      </ol> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          lists: [ 
            { id: 1, title: "臧三" }, 
            { id: 2, title: '李四' }, 
            { id: 3, title: "王五" }, 
          ] 
        } 
      }) 
    </script> 
  </body> 
</html>

v-show實例：v-show可以操作true/false來實現效果

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <input type="button" value="點擊" v-on:click="a=false" /> 
      <div style="width: 100px;height: 100px;background: red;" v-show="a"> 
      </div> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          a: true 
        } 
      }) 
    </script> 
  </body> 
</html>

:class實例：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.js" ></script> 
    <style> 
      .red{ 
        color:red 
      } 
      .blue{ 
        background: blue; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="app"> 
      <p :class="{red:a,blue:b}">我是123</p> 
    </div> 
    <script> 
      new Vue({ 
        el:"#app", 
        data:{ 
            a:true, 
            b:true 
        } 
      }) 
    </script> 
  </body> 
</html>

第二種方法

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.js" ></script> 
    <style> 
      .red{ 
        color:red 
      } 
      .blue{ 
        background: blue; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="app"> 
      <p :class="json">我是123</p> 
    </div> 
    <script> 
      new Vue({ 
        el:"#app", 
        data:{ 
          json:{ 
            red:true, 
            blue:true 
          } 
        } 
      }) 
    </script> 
  </body> 
</html>

以上所述是小編給大家介紹的vue快捷鍵與基礎指令詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: