vuejs代码-条件渲染-优快云博客

本文深入讲解Vue中的条件渲染技巧，包括v-if与v-show的区别，如何使用<template>元素进行渲染分组，以及如何通过key管理可复用元素。同时，探讨了不同条件渲染指令在实际应用中的性能考量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>条件渲染</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script src="E:/JavaScriptLibrary/vue.js"></script>
</head>

<body>
    <div id="con1">
        <template v-if="Math.random() * 10 > 7">
            <p>____________________</p>
            <p>--------------------</p>
        </template>
        <div v-else>
            <p>数字不大于7</p>
        </div>
    </div>
    <div id="con2">
        <template v-if="loginType === 'username'">
        	<label>UserName</label>
        	<input type="text" name="" placeholder="输入用户名" key="username-input">
        </template>
        <template v-else>
        	<label for="">Email:</label>
        	<input type="text" name="" placeholder="输入email" key="email-input">

        </template>
        <button v-on:click="toggleLogin">切换登陆方式</button>
    </div>
    <script>
    //使用v-if可以实现条件渲染，使用<template>元素包裹可以实现渲染分组
    //使用任何vue语法都要声明vue实例
    var con1 = new Vue({
        el: '#con1'
    })
    //用key管理可复用元素,不使用key输入的信息会复用，其实是元素复用了
    var con2 = new Vue({
    	el: '#con2',
    	data: {
    		loginType: 'username'
    	},
    	methods: {
    		toggleLogin: function(){
              return this.loginType = (this.loginType === 'username') ? 'email' : 'username'
    		}
    	}

    })
    //v-show也可实现条件展示，用法和v-if基本一样，但不管条件真假都会渲染，只是简单切换css属性display
    //一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
    //因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
    </script>
</body>

</html>

转载于:https://my.oschina.net/u/1375322/blog/1579836