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是可以做循环数组使用的

<!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快捷键与基础指令详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！