【轻松学vue】vue.js基础入门教程（四）常用指令

vue常用指令

上一节用的v-html就是vue.js的一个指令，那么什么是指令呢？

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

vue.js常用指令如下：

指令名	说明
v-if…v-else	条件渲染指令
v-show	条件渲染指令
v-for	列表（循环）渲染指令
v-bind	属性绑定指令
v-on	事件绑定指令
v-model	表单数据绑定指令

1.v-if指令
用于条件性渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染（truthy：是指布尔值ture还包括其他数据类型转换为布尔值时为真的值）

<div id="app">
    <h1 v-if="show">{{show}}</h1>
    <h1 v-if="!hide">{{hide}}</h1>
    <h1 v-if="count>15">{{count}}</h1>
    <h1 v-if="!isNull">{{isNull}}</h1>
    <div v-if="Math.random()>0.5">if显示</div>
    <div v-else>else显示</div>
</div>

<script>
    var app = new Vue({
        el:"#app",
           data:{
              show:true,
              hide:false,
              count:10,
              isNull:null
           }
       })
</script>

指令必须放在标签上使用，如果想要在某种条件下渲染一组标签，并且不包含携带v-if或v-else指令的标签，可以在元素上使用v-if渲染分组

<div id="app">
    <template v-if="show">
        <h4>{{title}}</h4>
        <p>{{content1}}</p>
        <p>{{content2}}</p>
    </template>
</div>
<script>
     var app = new Vue({
         el:"#app",
         data:{
            show:true,
            title:"易动学院",
            content1:'学Java',
            content2:'来易动'
         }
      })
</script>

还可以使用v-else-if指令，进行多条件判断渲染标签

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

使用key管理可复用元素，如制作一个切换登录方式（用户名登录还是邮箱登录）的功能

<div id="app">
    <button v-on:click="changeLogin">切换登录账号</button>
    <div v-if="loginType=='username'">
        用户名：<input type="text" placeholder="请输入用户名">
    </div>
    <div v-else>
        邮箱：<input type="text" placeholder="请输入邮箱">
    </div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            loginType:"username"
        },
        methods:{
            changeLogin:function () {
                if(this.loginType=="username"){
                    this.loginType="email";
                }else{
                    this.loginType="username";
                }
            }
        }
    })
</script>

由于两种条件下，渲染的是相同的input元素，所以改变loginType时，只会改变input的placeholder的内容，输入的内容会依然保留，如不想保留，须使用key属性。

<div id="app">
    <button v-on:click="changeLogin">切换登录账号</button>
    <div v-if="loginType=='username'">
        用户名：<input type="text" placeholder="请输入用户名" key="username">
    </div>
    <div v-else>
        邮箱：<input type="text" placeholder="请输入邮箱" key="eamil">
    </div>
</div>

如此，即可切换登录账号时清空之前输入内容

2.v-show指令
条件渲染，v-if是条件满足时才渲染元素，v-show先渲染元素，控制css显示和隐藏

<div id="app">
    <button v-on:click="display">显示隐藏</button>
    <div v-show="isShow">显示</div>
</div>
    
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            display:function () {
                this.isShow = !this.isShow;
            }
        }
    })
</script>

打开浏览器查看页面元素可以看到v-if和v-show的区别：v-if在条件不满足时，不会渲染对应元素，v-show在条件不满足时，会渲染元素，只是加了隐藏样式。

QQ：732005030
扫码加微信