条件渲染指令

条件渲染指令

   v-if、 v-else-if、 v-else指令类似于java的
条件语句

               if(status==1)
               {
               }
                else if(status==2)
                {

                }
                else if(status==3)
                {

                }
                else
                {

                }

  代码展示:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <p v-if="status===1">statu值等于1,则显示这一行p>
        <p v-else-if="status===2">statu值等于2,则显示这一行p>
        <p v-else-if="status===3">statu值等于3,则显示这一行p>
        <p v-else>否则,则显示这一行p>
        
         
         <p v-show="status===4">statu值等于4,则显示这一行p>
         
         <template v-if="status===3">
             <p>statu值等于3,显示该段文本1p>
             <p>statu值等于3,显示该段文本2p>
             <p>statu值等于3,显示该段文本3p>
             <p>statu值等于3,显示该段文本4p>
             <p>statu值等于3,显示该段文本5p>
         template>
         
         <template v-if="status === 1">
            <label>用户名:label>
            <input placeholder="请输入用户名称" key="user">input>
            
         template>
         <template v-else>
            <label>邮箱:label>
            <input placeholder="请输入邮箱地址" key="mail">input>
         template>
         <button v-on:click="clickFunc">切换status值button>
          

    div>
    <script src="vue.js">script>
    <script>
             var app = new Vue({
                el:"#app",
                data:{
                    status:2
                },
                methods:{
                    clickFunc : function()
                    {
                        this.status = this.status === 1 ? 2 : 1;
                    }
                }
            })
    script>
  
body>
html>

  展示效果:
条件渲染指令_第1张图片

你可能感兴趣的:(vue)