vue.js条件语句_Java开源博客系统-Powered by java1234

博客信息

vue.js条件语句

发布时间：『 2019-06-24 11:26』博客类别：Vue.js

vue.js条件语句，方便网页上动态判断；

主要掌握内容如下：

1,v-if 用于条件性地渲染一块内容

2,在template元素上使用 v-if 条件渲染分组最终的渲染结果将不包含 template>元素

3,v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”

4,v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

5,用 key 管理可复用的元素

6,v-show 只是简单地切换元素的 CSS 属性 display。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        1,v-if 用于条件性地渲染一块内容
        2,在<template> 元素上使用 v-if 条件渲染分组  最终的渲染结果将不包含 <template> 元素
        3,v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”
        4,v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
        5,用 key 管理可复用的元素
        6,v-show 只是简单地切换元素的 CSS 属性 display。
    -->
</head>
<body>
<div id="app">
    <h2>v-if</h2>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no</h1>
    <h2>template元素</h2>
    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
    <h2>v-else</h2>
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>
    <h2>v-else-if</h2>
    <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>
    <h2>用key 管理可复用的元素</h2>
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </template>
    <br/>
    <button @click="toggle()">Toggle login type</button>
    <h2>v-show</h2>
    <h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            awesome: false,
            ok:false,
            type:'D',
            loginType:'username'
        },
        methods:{
            toggle(){
                this.loginType=this.loginType=='username'?'email':'username';
            }
        }
    })

</script>
</body>
</html>

QQ鎴浘20190624112232.jpg