VUE2——v-if v-else v-show 指令

v-if v-else v-show 指令

1、index.html中新增加链接


<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue.js实例title>
  head>
  <body>
     <h1>VUE2.0实例h1>
     <hr>
     <ol>
       <li><a href="./example/helloworld.html">Hello World实例!a>li>
       <li><a href="./example/v-if.html">v-if&v-else&v-showa>li>

     ol>
  body>
html>

2、v-if.html


<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>v-if & v-show & v-elsetitle>
    <script type="text/javascript" src="../assets/js/vue.js">script>
  head>
  <body>
    <h1>v-if 判断是否加载h1>
    <hr>
    <div id="app">
       <div v-if="isLogin">你好:猪猪!div>
       <div v-else>
         请登录后操作
       div>
    div>

    <script type="text/javascript">
      var app = new Vue({
         el:'#app',
         data: {
             isLogin:true
         }
      })
    script>
  body>
html>

v-if和v-else是一起用的

v-show表面上看是和v-if作用相同,但是有很大区别:
   v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
   v-show:调整css dispaly属性,可以使客户端操作更加流畅。如果不显示,display:none

你可能感兴趣的:(前端)