一、v-if

v-if指令用于条件的渲染一块内容,当指令的表达式返回true时,内容才会被渲染。

<h1 v-if="isshow">要显示么</h1>
data () {
return {
isshow: true
}
}

如果想切换多个元素,可以使用<template>元素当作不可见的包裹元素。并在上面使用v-if,最终的渲染结果不包含<template>元素。

不使用template效果

 

二、v-else、v-else-if

使用 v-else 指令来表示 v-if 的“else 块”:v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if的元素之后。

aaarticlea/png;base64,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" alt="" />
当说showName的值为false的时候,v-if语句不执行,如果有v-else语句,就会执行。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAe0AAABVCAYAAABkWrxXAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAACkrSURBVHhe7Z15cBXFt8cty/JXv/pZ+oDSYqmESkIFQhEglRCSVAKEpVjDvkOxo8gWVmVHQZR9FwRkC/siLuCOO664oaKggqKgIiKK6PMt9c6bb99fT3omZ+703HuBLP3Hp+7MOae75947t79zunvm3nDLfyRQaaJN+96s/WpSMzmTUjPbsD6DwWCIBtO/GGKJEW2DwWAwGMoIRrQNBoPBYCgjGNG+Bhw4cIC16+BVNpo6gxDtsfvBlSuvRPN+K8pnFen7jPbz4cpXlM/cULYwoq1QtUYKbdq0mcZNuJf1q+Tktaaly1bS7t17aMuWrXTXiLFsHIjmx+9VNlydbh/2/VDjVcL5/PAr6+WXxxSEaOtwl+fgykm4eDe6cV5EW55DfQ9+RFNW4q7DjU4MR6TlJFz5aOs0GK4GMRPtffv20fA7R7O+IFxP0b6jeh3asGEjFRZOYv2SWnUyaOfOXTTi7kJKy2hKzZp3oPwWBWwsfvjh4MqoqDFe2xzh/DrtAt04L6I5Ri+uxrGrsdjmcMepeNndBImLBK6uSIi0Lne5SOqJVdtBQXkduLIGw7UkZqKNjHPIsJGsLwhlYXi8Z6+BVFS0jfWphPuh63QA7hh13698OL9O2wBxOnBlARfrhivnRZD4WMS67UHiguIur+7rEGmZSODqAm6fX2ykRFOXu6wsH8RuMFxPtEU7p0kbmjHzfrqlEu/fsXMnDRoygvUFoSyINkYU1q9/lPUBdwfh/vHrdgZcOS/UOA6ujMQrnrO7CRfnV4duGwCxkcTr4lWH177XNrcfxB5JXV4xfujU7cbtw74uajkOnRgO3XJecUHtV4uMzHyaMnUW1Yivx/oNBuAr2lWrp9DEyVNp//79NGHSFKpSNZmNQ+bZf+CdrC8IOqL96KObaGzhRKfdupgoKiqigYPvcto1wfvDjxSgfi5G4ifaHLJu3Y7AHesup1uPG516gtQdLtavHt12ZJz6GrRuv32OcGW8trn9WNl129FBLYttierzsquoNrc/nM9NkFgVLlbXJu2qT+5zqOWuBg3Tm9DDa9aKfqx9QQ82xmAIK9qt23YRi6zWrdtAuVamzcVIENen31DWFwQd0R45alwJYc3ObSV+WMkpjRx2XerWzxaMGTvBU7SHWWINcZcCL7enTpvNxrt/8Oqraudw+92xXmVluXB+3X1ZjxuveDfuchxcORU1xh0frg4uNtw+R7gyXtvcfiR2rzq97LEkSJ1qbLhjC1dnuHLh8IrTLQ8Qq8bHos5ouK1KEg0dPor27t1H9895kGomNWTjDBUXVrTjExvQrNlzxeIyCGTlO2qViHGzceMm6tV7EOsLgo5opzdqJn5EuDKVttFjxovV3GpcJGCI30u04xLqU/2GuTR+4hSxyhzbQP1hyU6A+5F72dzxctv9qsLZVNz16aCWl+X8bFxMLOCOyastzi5tsp5wcGW5GPkabpvbV23hfF7o1B8NqE8i9zk7hxrjRyzLu/dVwvlUZJwaj20vZMy1oF6DHFq8ZLmYduzWvT8bY6iYsKINUYIIY2U05+fAcHH3HgNYH+wyK3UTSRxA9q+uVsd+3/7DHDFB6pOEE21JJMPjQOeHr8aEi/erKxadDFeH28btR4paXq1T4mUHbl/QfY5wZby2uX23TSde4uULV+Z6EuS4ZKy7DFdHJPWGQ43x2lbh7FejX3NQKUH0aWgbiQobY6hwsKKN1dE4oSZNnkbVatQt4edYu3Ydde3ej/VVj6tnZ6Vu3HF9+4/wjQO4L3r1w2vFNvw43oRaaY4Y3XZVYiHa+JEFxase+aoDVzYauDqiaScWx6SL33HqHItXGa9Xid++2+bl5+wqOjFeyLKREE0dallum9v3skn8yocrC1Q/tr1Qy4Ag/RoXA9Q4N5lZzWnN2kfE1GNicjobY6h4eM5pN85uYQlx6ITB3DYXczXQXT2OEx4/JMxh41azhYuWsnFBud6Ztkq4eL+63H7se6HGqXA+ty1I+XCxHIj3gysHuFg/uDrcNtXu53dvu+HqwbZq98NdJlqiqYcrq1OfOyZoPbEs7xUXrnyswfMiCsdNthMnLAbm4gwVk7AL0SrdXktktJjbnjlrjpjT5eJAXM1UEc/5ghDkli9cVGD4aPmKVTGZTwexFm2vDkGnEwgX41fe7feK92uDwx2j7qtwsRxqjEo4H9At67XN7atwvnB1ue3h6gZ+cbrlvcCF7datRTRn7oOsH6AOXbjyEs7vV0bijgtSV7Sxbju2vVDLXC3woCb0P3jIU16ztmyMoWITVrQlDdLyaMXK1SLr5m75wqprCPsD8+aX8AUliGhjNTeG5dF2uAsKXyo5V4/jfcp97v3qirb7h+637yacX7es+9VN0DbctiDlw8Vy+MXrtu11HDr1S1Qbt63iZfci0nr8/LibAzHAK1tT6/Da5vZV4JOoNjUmHO5Yrh6uPq82vOzAr55I6owV7Tp0F9k1bmf1urXWYNASbXBr5UQxx8L5MN+CK/pJ90xj/UEIItoQVfyY5s9fxPp1wbw96uHArWTueB3RRtlIbZJIfQB+NcYr3q8eP/zq1TkGL/zi/dp276t2bHPlpd3L57Xvta2DV7xfPX7+pNoZIibcyJFah9c2t+8F4iScn8OvLa6ucPUH9ak2r7Lh6owVGKnEA1Y4n8Eg0Rbta0UQ0S6tuH/gcj9ohxCuowjnA24/9r1Q43SQZbzKuu1+8V4g3g+vcu79cLFuPxfrZ/MrzyHjvOJh94MrJ0ltkCNicJHJ+YFaB7ftfg0HYtx1uG06BI2XyHKRtBcErg6D4VphRPsaEcmPPVyZoPV5xUfaCQWtD3Y/uDJum4puGb96/AhXHj6JalNjwuFXN2eX+Plxfy+GW8OtPNY5Vr9jlHB+iU47kiCxbiIpG017BsO1xoi2wVBOwcrjuQ88xPoMBkPZxIi2wWAwGAxlBCPaBoPBYDCUEYxoGwwGg8FQRjCibTCUY0aMHE/vf/AR/fLLRZr30GI2BujGGQyx5Msvv6azZ8/RUwefodSGeWwM0I2Lhpatu1Bao9L/jHcj2mWI+Dvi6ae+N9H2FrexfpWutavRsa7/pP8cdCP93O8mWpNXiY3zo88rWTT4w1xKH12Puh/KFNtZ90b2IJv4nFqU0r0OJbWtzforMrH8nCV5zdrTn3/+SX///TdduXKFZsyaF1VcRWPw0FH084UL9Nbb71HVGuZRoleDTz49Ls478MYbb7IxQDcuGo6+/yGtWr2O9ZUmjGiXIeJuj6fve99MW/PDi3ZajRp0ZeCNtLZJJWqVWJ36p1SlARZcrB9SQOoPSqFOexuJ7Ywx9dhYP3o+HxKmlivMfwS7ieXnLBlbeI/d0dWtn8PGAN248gKe7b18xVr66qtT9Pvvl+ncuR/opZdfoybWxYsad+jQc/bn0q5DD4fvqlIpgVJSs6lanN6fNZV18F3gM7548VfWL9GNi4SuPQbSb7/9TrXrNmb9pQkj2uWQmY2q0K8DbmJ9QZECUqdbHeqwJUNsNxgSWWdyPUQ7rnEt0aakVodQlt+osJ7Y77izUYky14NYfs6SIcNG26JTPd77AkA3rrywpWin/X4v/PKL4NKlS5RYy3k/e/deg+mLL07Q08+8QFWqXpvRoZ59htDly5fFsXXq0reEHxcW8tgB4mGfO2+h2H/7naMlypR25LFj+JvzS3TjIgEXbUXbd7O+0kaFE21cUT3x5CHxWFbOXx5YmVuJvrMycs4XlPabQwJSq01tar0mXWyn9KjDxvpRGkS76UOhtkubaOt8zm3adad9+5+gJM2/aUS87Nwzs1uyMUA3rrzww48/ifeK+VFktbDpfqZXmwGD7ra/Cx3RxgUI7GVZtNet3yyO/eNjn7B+iW6cik5/36x5gZgWivTcD/q7jJYKI9rxCQ1o+869Yu4OV1TqHFWztv3p7nuXUoOstjRmxmqavmgn3TV5CSWmRDZUeLbPzbTFNYR9a6WadLH/TbQgu7LDrsv/DrmBaFiIc1b9XIwklqLdanWaEJD47FqUv6hhSFjal8w66g9Moc77G1G/I9nU/61s6mJtZ4xNpVvvKI6Rot1qVRrlTKtPfV7Oor5HsqjJnAaOukC93lZ9+xqJuvq+kSWErFrDJNvf68XGoq70u0pmozJTbTwx1RZtOWfc+3AW/cv6LjjRxnx72w3pou4B7+ZYsY3FsartNp3bQJTDa9fHM6n3q1liHrrAqgfvPXeGcx4amX3Bjgzq92bofbR5JJ2qNyr5b3g6n3Pzlp3o088+px9++JHuHjXB4ePAohrZubdt7z286xd3+vS3wrf/sSfFfo2aqXb8wsUrHbGF4+6lDz86RhcuhLLXjz4+RvfPXVAiU0WG+OZb74qhzvM//0zPPPsi5TRx/qsV6pHtjB47mfKathPzy8hEf/31kiM2COigUeeKlaH/43fzyLpNdrsSiKk7Lsjx+X0utWpnONpTOXv2rF2PFG2cA3j9/nvLZ114cKKNEZTnXzhM3357RkwDfPfd9/T4E4eoUVYLO+bRjUWiHF4xb4wLmln3PSTeBxYluud4db63oOze85g4htdeO8L6JbpxIFx/7+axA0/RwUPPlrDr6kLQ32W0VAjRxsmLE//kya+oa/cBJfz4cqYsKKLR01dRw+wOVL9xWxo3+xEqnGX9qP99JR6E9U0rCeFWbV2SqwnBzYir4bDrklOzBuVabGp2m6doL8+rLMT9/4aGxB3b4MnWt7LxsSK1f10hMgDiBKHF9oD3sqlGZrFASdEeeDRbIONAckFxp552Z0hQAWIGHs0R2xDI2+uErpgLtv1bmCenCnHDNuJuvd36rA+E5ofr9U2xRbvbU42p53MhoU/IT2ZFG3PIsEF8+7xWfGw9DjUW9SJGijYY8G5xjNzG+6oUH4qt06WO2IcdFycD3gm9D2xXrV98IRCEynck06Ilq0Qn/Oxzh/k5aOucTU7JpPUbtohO7tKl3/gsQDNOV7QhXNKOTh3Che0//vhDLHaTcRBAKZwYmsZcotxWV+8ePvyK7duxax+dOfOd2Aaff37CjtPl6NEP7fJuWrftZsfhPUHgZEYOONHWPT6dzyUhKU20+dP583Ys2oftuecP23VJ0T5u1X/q1Gmx3b6gJyvas++fL2wQX7Ve9IM4jxAjRRvIYXl1G99TfGLoolr3ewvKg/OXhOqxLmh69xvmKbC6cX79vQqOG+9J/f4lQXRB63cZI8q1aNeplyWuoPClPLxmg1iAwsXhy8FVVPWENNuW2bQLzV6+l1IaBv/XndaJ1YVotkyobts2WmKL1dxqXCQszKnsKdq1q8ZRs5rVaUeL2+jHvjeJbVC3WpwjbmDdqragq5y3yqhxumC4W4iRlUkis0Ymm9g8WWTfapwUbYgvxLxGZpLYBxBRxKA8RA02DBnfUiU0xC3Fr+kDoQ5EZqPI0lWRR1Yss/CEZsm2aKPOvNkhwc2d1cAWaFW0b6ueQFWSi4fRIPqIAXFWBgybFO2Cogy6o17o+Ls+kSnKDno/JMoyk+7xbOg4cMz4TBCD0QjYmj0Y3RRBrpXVvfPuUdFhTpo80+GTc9Q47987+oHo4FR/0Dhd0UbGAhsyMJFBWh1bh469RJYpY8DXX4fEZuOmIhGDBVcya92ydYcjFh0g7H/99ZcQiQULl4v9l1953RGnA7JOiCDKA4gZ9oEUJhWIoYzlRBvoHJ/u5wLQjmwz3PA4VrWvfSQ0IrBm7aO2QKuijfUJ6sKqkaMn2nVjSBg2KdpYkd0gvanYRtaIsnhP2JeZdJDvLQi3V6st3ss334TOM1xgRBKn29+rbN6ynV5/nc/cI9GFcL/LWFGuRbto227xBbdo1Zn1S+QVlWrDF4UvJ7dVZMdzptfNYpha3X+gcRVHzLSM21nxBGqcSjjRlvgNj2MVuhR0FWTzXLwfGIaGEAFktNlTUm2RU3HPaVeqkWCXQ8YMW2KLZNuGldSybKc9IbHr+mSm2M8cH2qzxbI0IcZy9TWy7v5vhwS+SmLxnDaycGTY2EbmLIVeFe3K8YmUOSGVOlhZfI9nGovhe8QAuYBNinaLpWmifmyLiwvLJy8s0Gb1jOK5dGTtGGoHcnQB4i3bjRir47xvzgLRgbVq09W29+k33M6CsJAKmZ6jXMA4XdGWggWQCS5d9rAtDpLsvDZ2DDpdKZoy+/zgw48d8VIUwdRp91PNxIZiG0OfalwQ0KmjDq/hcUkQ0QZex6fzuUh0RRvDvvL4kFHeO+U+sa2KNoaI5y9YRkeOvC1WymOVvKxbLmCTor1n7wF7iF5ecMjPCW0G/d6CAHFFX42LGtSFY40kTre/l+D9YqrC62I1Yl3w+F3GinIt2vgR4cTbsXOf+DFxMYD7cqpUqyO+nPx24YdXvMB90Sd6/ENsQxAxZJ1a3ZnxJnqIJ1DjVGIh2rEG2XHeffXFsLIUKtBuU7rILmWcjmhj9bS0YXhZlm23MbQ4q89LWWK/bs9QHOyYJ26+uKEQzfRRxUPciJOiDdCezMJzptcXr1K0cZxS+DmCinZSq9CQvRfdngpdfEQDOm2IAOY166c1cfjw38wYrkPHgd9AvQa5Dn+QOF3RRhaJ+WBksNIPDr/0qr0qvXPXfg6fG/ewtxRFZJbuefFIuRqiHe74dD4Xia5oA3wPckh+5apHxKsUbdR74sRJO9ZNUNEO+r0FQQ57Q4zzW3RkY4BfnG5/L8HF07Fjn7I+EKkuhPtdxoJyP6eNYSicUJjjwHAgF8N9OTUS08WX06iJ3lWbm3xLeOUc9pLcynS0c/RD4yAWoh3r4XHJrVVrUp2udaj9ptB8M8AiLenXEe2k1sVi58i094YEFZk89rFgC/uwI/tuPClVzFkj84Yd89qIU0UbmTSGqrEtF6tJ0VaHwjF8XiUhUQxzS1tQ0cbwvyybPjK2t1Ghs8YQpeygkFFxceoCM3QkXAzwiwuyEA0gIxo0ZJS4jUbGYXETfBg+lDadh7hIUYQAcX4V/L6RBUK43LdvqVwN0dY5vnCfi6T/wBG2z0+0IUw4D7D9yitviFcp2upQOIbP8XlgmFvagop20O8tCHKB2auv6i1ECxen098DXNSct86VUWMmsX4QVBd0f5fRUiEWouFKFzfmY+EHbvPA4hvVjy9n6oJtjtsCspv3oFlLd1PN5MgzolM9Q0Pin3b7B81q5Bwaj5TSODyOYWeIbuWaoc8vPrdYsDBULuN0RBsZLxazwQbxv6VySHilIMq5YMRhH/PGGHLGYriC7Rkig4W9zdpQp+0WbZkB93k9dCxStBsMLl5MhwuPWypjhXnxsL+wWXG6oo05bJnV93i6Md1RN7TwrFpaEqXdHfn91xjShohifrFH78FsjES9lSujcXM2BvjFYegcPjn3N2HSdDteFW2IHPaxqAr7GKaUccuWrwnFVUoQq5lhw6Mp5SMpcbvNtBlz7bokQUTx9Olv7PYwJM3FgGst2lqfy79RfXJOVHxG1ueGbbdoywwYAoRXKdrjJ06z43ChgL5tzgOhxWrShjhd0Q76vQVBrtYPl/UC3Ti//h7gYgkL+W6r4r0gNIguBPldRkuFEG0J5pGwcAJXYerThvDl4Opp0Ji5YoFBRm4nmjh3Aw0e+4CjfFBW5FWm05Zw/4+VxWKRGBejA24Xw8pxuXr8fL+b7P2qVeJLxF/L4fFKcdYJq8z9Yv5WihdWS8dllVw9Hk60gZyvBurqcQitFD+AoXLpS2yZLLJsuY95bsS4RRtijHLSJkUbq7lxmxdsOH554SBXheNWMMTpijb2cZ+1PB68ygV2oHYn/0UybvB8cMxlbnh0q9bTsuRCMxAu3i/uwOMHbf+PP4XEAceBVynacQn1HXOmiJOdPubNm+Z3sOsbOnyMXR6vGFqW5foNuMuOU1dnoy7MoWKOVvrdyNXUIFycn2hjNT3aUlePy3ncmbMftON0ji/I5wKwClkOa2MhGOLxiswZfrdoQ1DwsBFpk6KdnpkvVjLDhvawah3bclX4Cy++JOK0Rdva1/3egiIvJvA5cX6JbpzEq7/HlBDmvv0uNnR1IejvMloqlGgDXFm5H0koh0HyOwyi8feto2kLt9PAMXOoanx0z36GqGKI/K2O/2L9uiRYmTHq4cCtZO74az2nXbNpMrV+OE2IN4QLq8OR6cbnhW4rkeiKNmg4tK5YlQ3RhNiJ+5sznIvbcP+zLH97ShLlTA3NUwN5/3YJ0bZsTeeHVp4DdSEa5tAx/A7xxvx22p11xcVAl8cyxVy5KBtAtEFSm9rCj5X1qBf1Y+EephJkjC7IILhbU7wYozye1GtOG/jFYfgc9+ZCZLD4B52dvH1KzbSRsSOzQaeKDh+id+jp58UfMaj1ATz04uWXXxfzkxAXzAEiO1ZX/MqVySpYFazWoyKHx7F6V2a1HFKMvEQbAuZuV6K+X93jC/K5gKzc1uKCANkzbm/Cyv5hd44VPrdow7a1aJdtk6INMDqAzxWfLy4Epky9jzp27iMeTiIvPoKINtD53oKCuWW0gwsLzi/RjVPh+nus2sfFkN/z5HV1IejvMloqnGhzyC+H8xkMZRXMQ8qOF6/TZ/IjR7pxBkOsOfbJZ+K8A0eOvMXGAN04Xyol0GfHv6DFS1fzfoXSqgtGtC2MaBvKK3hCE27HQXaC1bdcDNCNMxhiibwVDX/OEm6ltW6cH7jXe4mVses8ctSItiZGtA0Gg8FwvTGircn1EG2sBEzNbMP6DAaDwVDxKK26YETbYDAYDIYyghFtg8FgMBjKCEa0DQaDwWAoIxjRrmDgfsoDBw7YbN68hY0zGAwGQ+nDiLaLffv20fA7vZ9ZW+aplEB162cLRo4aZ0TbYDAYyhBGtF3s3r2HhgwbyfrKG/0HDjeibTAYDGWICifaOU3a0IyZ99sP4HezY+dOGjRkBOsrb5R10c7IzKcpU2dRDdffGxoMBkN5pcKIdtXqKTRx8lTav38/TZg0hapUdT4XW1JUtM0SsztZX6x59NFNNLYw9EcANtbFRFFREQ0cHNkD+GsmNaSZs+aIi49t27eHfa86ot2seQdaumwl7dq1m7ZuLaIH5s2nnLzWJeKCtBsrGqY3oYfXrBWfV/sC5/OFDQaDoTxSIUS7ddsutGXLVlq3bgPlWpk2FyNBXJ9+Q1lfrMGcMoRbtWXnthILxJJTiv/IQpdKtyfR2rXraNHiZeJ95rcooEceWS8uVrh4P9GuXTdTzPGPHjOe0jKaUm7TtjTi7kIaNXq8Iy5ou7EEfwgwdPgo2rt3H90/50Fx8cDFGQwGQ3mgXIt2fGIDmjV7rhAeCGTlO5z/EsWxceMm6tV7EOuLNemNmgmBRsYobRBIZLZqnC5du/cTc/JxNYv/MQsXAXj/+CzUWOAn2i1bdxbHl5KaxfolQdu9GtRrkEOLlywXmX637v3ZGIPBYCjrlGvRHj9xihBhZImcn2P9+kepe48BrA92DK9zRBIHkP2rq9Wx37f/MEeMbn1Tp82mhYuWOmzIRBGX16ydww78RBsiLEcoMGVQq07oLyjd6LZ7NT4/B5USxGeHCw1cELExBoPBUIYp16Lds9dA0dFPmjyNqtXQ+3NyDPMic+R81ePqUf2GuSyRxIG7Royl1Q+H/tcXfhxvQi3nfwHr1vfgQwscAieBiBV06uWIBTpz2hBuXFSsWfuIqGv+/EVi2FyN0W33anx+KplZzcVx4kIjUeNffAwGg6GsUe7ntBtnt7CEONSRY26bi7meQIggbpjDxq1m7ow1CNNn3EfLlq8sIXQAC/Hc8TqirYJ7u1etXkPLV6xy2IO2G2vwwJjCcZPFhQIu0K5FmwaDwXA9qBAL0SrdXktktJhjxQrnuIT6bBxAZol4zne1wEUFhnUhhtHMp2NkYfuOHdqjCr37DhEXM5xPwNwWN8zKuvE5qrag7cYSrG7HYr4NGzZSXrO2bIzBYDCUFyqEaEsapOXRipWrhVBxtyMhk4Qg4bYmt+9qAiHEsDzaDndB4Qf+4B3zz1jF3bR5e2rUuLnIppGFcvFYLIbstHPXPmLev3nLjg4/LnSQ+WNBGj67dh26i8x84cIljrig7cYKHA+OH7fNXe3bywwGg6E0UKFEG9xaOVHMfXI+zIPiXuRJ90xj/VcLXCxgiBzzxZw/CHgP8n7pPXv2CtGFkHKxAEPyuM8Zq78XLFjs8KEuDDfjImfv3r1iUd+48fc4VomrsUHajQUYEcEDVjifwWAwlEcqnGgbDAaDwVBWMaJtMBgMBkMZwYi2wWAwGAxlBCPaBoPBYDCUEYxoGwwGg8FQRrihenx9Kk1AtDl7UHLGbIkpXBsGgxfcOVSa4I7ZYDCUfoxoa8K1YTB4wZ1DQRm24EnqMXsf64sW7pgNBkPpx4i2JlwbpYnaCXWJht1gc77fzWxceaJDxz40euw9NHDwSNYfLTWT0mjajLk0eOhoSs9swcZ4wZ1DQfnkq3NU9OyHrC9auGM2GAylHyPamnBtlCriUqllSm3BppZVK4Rof/PNGfr777/piScPsf5oqV03S9QPlq1Yy8Z4wZ1DQShc8Qz9/scVKpi6i/VHC3fMBoOh9GNEWxOujdLK4ibVS51ot27X3RZAILPjBQuWi/333nu/RBk/yrNov/XJN/TE68dZXyzgjtlgMJR+KpxoI4M5/N5JymV84eDaKK1ca9Hu3LU/HXj8ENVPa8r6gVu0t+/YK+wVTbR1zr9BDz1Of/75F/W+fz/r9+POhU/Rs2+doHb37GD9gDtmg8FQ+qkwot1q0jZ66o3j9Odff4kMJn98ke3rOW0bjZu/iwomF9GEBbtoxpI9VPjQTmo1fqsdw7Xhxbm+/6Btre5w2GrEp9LFATfTsqbVHXZdGtVKoRcKKtMfA2+i3y32tb2dkmrWY2N1RHtYeiJ90v0W+mvQjfRL/5vpSOfbqG+DpBJxOu22L+hNx4+foB9+/IkKx091+CRStBGD17Nnzwq7l2gXjptCH350jC5dukQ//3yBnn7mRWqa39ERI0X74KFnaeOmbfTrr5fo3A8/0qIlqx1xQKe++MSGtGFjEf3403lRD7ZRP5CiPWPmPNvWs89Qu+yWrTuF7bfffqOk2pn2eSMJd/65ef6dE/TS0a9K2HXOUzBk/hN08tvzdP6X3+i+TS87fBJ53AaDoWxRIUR7+rrD9MPPl+j02Z9p7IqnHT6AznDakt2iI+x4T5HoFCcv2E2TFu6mnNGbRQzXhheYU4Zwq7beliBigViTOnUcdh0S4+vRN73/SR91u5X6WfUMtwT32z7/pP2WgHLxfqLdrHYd+u/BN9JW68KiY71kGtAwiTa0qEqbreNW44K0i0Vby1eupd8vX6YXXnyZGmW1cvilaH/xxQk6ffobsd21xyBWtGfOelDYAET2zz//FNsQU7VeKdpXrlwR7V6+/IddbtidhYHrk8Ir4+Q2kKKN+L8s4YVtwcIVdtljn3wmbC8efkXsq+eX3/mngtXiV678ScMXPFnCp3OeSpoUbqWNB4/S5T+u0GsfnqLO060YxS+P22AwlC3KtWh3nLpLZCzoBLc/9xHlj+OzG3SGyFryC4ttXe4totnL91K7iaEshmvDi06WEEKgC+om2zYIJDJbNU6XGTnx9J+WyKYlpdg2XARAeDMUm8RPtEdmJIjja1GnNuuXBG0XtGzTjY4e/YB++eWiWHkt7VK0L1z4xc5g123YSvMeWiK2pWgn1EoXMbC9+toRkf2iLIQZtq1Fu+w6pWjjFWKa0bglXbz4q7DhwiFIfSmpOfSHJXCwvfLKGxSX0JAGDRkl9oE6PH7s2KfC9vwLL9ll5YXA1Omh94xzRvf8U9n/yif03vEzrE/nPHXT/4ED9PHJs/TrpT9owfbXbbt8LwaDoWxRrkX7idc+o+9/ukhDFzxhd1Yc6AynL97jsKFjRGfYfWqoo+XaCMd3Vka6Nr+aY39BkxqOmPty4uh/h9zAosYdal+FPrSyXdUWb2XBiBtoZcmqHfiJdkNLcC/0v1kc0yLrmPKszJuLC9quyoPzlwoR69i5n9iXog1xQ4aN7S+/OmVnwVK0u/caIvbB5Htn2/W9//5Hwvb55ydsGzenDWGG7eSXX4t93fpUgS4cP03YvOa0V61eL2wYQsf+8LsKxT7eW1pGvrDhnNE9/yTt791Jv12+QhMffo7165ynPJtp9f63xTHi3m/Y5HsxGAxli3It2kt2H7E60r/o4BvHqfWk7Uon5oTrDJuMDXWGvSwf9rk2wrG+eVX6sue/xHZbK+P+v6E3UONkZ3aamlhX+DjUuDc73ybKq6IOkC1PblzTEQt05rQh3LioONXrn6Lud7rcJobN1Zig7UogyhgGx7x1Vm4bYZOiDSCG3313VmyvXbtRvErRHjFygh0HMZR1vvzK68J27twPto0T7UOHnhc2zFtjX7c+zHnLOLmy3Uu0O3XpZ9ubNCuwRw7UIX6cM7rnn2Tzoffpi9M/sj6gc55y3L34IH155jydO3+Jus7cK2zyOA0GQ9mi3M9p373kEH313Xkxp4i5RWlX4TrD5v/OYDrfG1mm3c4SXjmHvTK/eomMNQjPFVSmT3vcwop7XUv43fE6oq2Ce7tP9voXfWa1odqDtguRw3Azhp737D0gho2lTxXtuvVzRRy2X3v9TYfg9e473I5zZMYffCxsuBiQNk60jxwJZZRfnzot9nXr6zdghB2HB7bAFm71+Nmz54R9wqSZYoEbttU5bnke6Zx/oMWEbXTh199pzmZ+4RjQOU9VWk7cRvtf+sS+cMBiOOlT34vBYCg7VIiFaE0Li2jr0x+IucXDR7+kDlN2OvyiM1yCzrB4MU+3KUU0a+keajku+Jy25HTv0JD4cUv45ubGsTE63J8TR5cH3kT1GKHkeCivhhj+5nwAK9ndtjXNq4m5atUWpN3Bw8YIET11+jQNGFTyCWVu0e7VZ5jYPn/+Z/EqRTs5JUusAoft1VePiLlldQ562/Y9dp1StLEIDAKb36IT/f7778L22IGDgerDfLicl37q4DPChvlp7AO3aO/Z+7iw41Y3WVeLVl1svzyPgN/5B1bue4vO/PAL5VqZs9sn0TlPJZMefo6++/EifXvuAo1f9azDB9T3YjAYyg4VQrQluP/1+KkfRNbT3HXLF7KVUQ/spHYTi6jzPUV076LdNHpecefKteEHhBCrr/9nyI2U7rFwS4fkhHpi/hmruIekJVK31Foim97R2nlbmQSLxTCsPTU7XqwOvys90eHH0D0y/7szEqi95R+XWVNk5ke7OkcDdNvF0DIEb/OWHVSrTmOHT+IW7Ro1G4ihaWlTh5YXLV5l29XV3hB4OdwOpGgDiLUUTywowyNOg9aHld9qHF7lSnG3aMthd7l47cTJrxx+ed6oeJ1/eYVbxdz3sj1HHPFudM5TMHvjS+LWsr2HjznaUVGP1WAwlB0qlGgDZDIjFh102OSwY6/pRXTPwt00Y8luGjlvBzVTVulybfiBYWcMkWO+mPMHISu5Dj3fIXS/9H9ZGfEH/xZSLhZgSB73hWP1t1uMs626DrStIrJx1PVj33/QLkuI1VXiEp12sUIb87yqzY1btGHbsXOfbVNFG2DlOe79xm1cWP2NldpqJgukaGOo/Z13jwqhxcKyocOL564lOvXh+eIvvfyauADAfDzuyUZ9aMMt2rg4kVk9wEp41a+eXyrc+Tev6FU6f/G3sPduA53zFCCz524ZU1GP1WAwlB0qnGhzyM6Q80m4NgwVmx69h9qiXdCpr8PHnUM8m+nkmfO06dBRxudE5zzVRT1Wg8FQdjCibWFE2xCExORGYiX6mTPfC8F+913nKAHgziGOZuOKxKrxcI8clRjRNhgMRrQtjGgbgoCFajLDxq1lzVt2LhHDnUPRYkTbYDAY0bbAytsOk8PPJ3JtGComK1evo9OnvxUrx93PL5dw51C06JynunDHbDAYSj9GtDXh2jAYvODOodIEd8wGg6H0c8Mt/5FABoPBYDAYSj/lSrRbtu5CaY2asT6DwWAwGMo65Uq0j77/Ia1avY71SZJScii/wyDWV6VaCk2cu4G6DprE+g0Gg8FguH4k0P8DT4TBMALDp+UAAAAASUVORK5CYII=" alt="" />
也可以不写。

三、用key管理可复用的元素

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。当你使用v-if的内容中有复用的,也有不应该复用的元素,可以需添加一个具有唯一值的 key 属性,这样就不会再复用该元素,这两个元素是相互独立。(第一次没理解到位

以下面的登录例子来说,我们有两种登录方式(用户名登录和邮箱登录),如果不加key值,那么所有的元素都会复用。

也就是说如果用户先输入了用户名,后来又切换了登录方式,那么她之前输入的用户名不会被清空,需要自己清除,这样对用户体验来说是不友好的。

在input里加入了key以后,这两个input不会再复用,当用户切换登录方式后,之前用户输入的内容会被清空(视觉上清空),实际上是重新渲染了该文本框。

<template>
<div class="box">
<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>
<button v-on:click="chage">其他登录方式</button>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
loginType: 'username'
}
},
methods:{
chage:function () {
if(this.loginType != 'username'){
return this.loginType = 'username'
}
return this.loginType = 'email'
}
}
}
</script>

四、v-show

用于根据条件展示元素的选项是 v-show 指令,带有v-show的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display,

当返回值为true,那么元素的display:true。(注意,v-show 不支持 <template> 元素,也不支持 v-else。)

<h1 v-show="ok">Hello!</h1>

五、v-if和v-show的区别(vue小白面试常问问题)

相同点:两者都可以控制一个元素的显示与否。

不同点:

1. 控制显示的方法不同:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

2.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做,不会去渲染该元素;只有在条件第一次变为真时才开始局部编译; v-show是在不管初始条件是什么,都被编译,然后被缓存,而且DOM元素保留,只是简单的基于css进行切换;即v-if中当为true才会被加载渲染,为false不加载。v-show不管为true或flase,都会加载渲染

3.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
4.使用场景:因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,当只需要一次显示或隐藏,则使用 v-if 较好。

六、遇到的实际情况

在项目里用iView的tabs标签页,里面的内容有一部分是请求回来的数据,还有一部分是按钮,当请求回来的数据为空时,将不再显示按钮,于是我就都使用了v-if来控制按钮的显示隐藏。一开始其实是没考虑到性能或者消耗问题,其实tabs标签切换的很频繁,每次都要重新数据,然后就出现了问题,按钮会出现闪一下,样式位置都会闪一下(一个很短暂的位置调整的现象),确定了并不是因为样式没固定。看到网上说:如果v-if内有多个元素,那么视觉上是元素先出现,再调整到设定位置的过程。我这个应该就是因为一开始数据还没请求到位,所以就短暂的出现一下子。

解决方案是直接把v-if改成了v-show,问题就解决了;尽管在网上也有看到说v-show也是有闪现的问题,然后用的v-cloak,我这里暂时还没试过。

 <div v-if="istruee" v-cloak>
显示
</div>
[v-cloak] {
display:none;
}

关于v-cloak的内容:https://blog.csdn.net/q3254421/article/details/83048594

 

最新文章

  1. 计算机程序的思维逻辑 (43) - 剖析TreeMap
  2. C算法编程题(二)正螺旋
  3. C#实现任意大数的计算和简单逻辑命题的证明——前言
  4. .NET: C#: Attribute
  5. 初始化css代码需要注意的
  6. XML解析的例子
  7. Linux 下Mysql自动备份脚本
  8. OD学习笔记10:一个VB程序的加密和解密思路
  9. html中文乱码
  10. win7电脑关机时间长怎么办
  11. [转]AI+RPA 融合更智能
  12. UOJ129 NOI2015 寿司晚宴 数论、状压DP
  13. 5.1 四则运算单元测试j
  14. SpringBoot2.x过滤器Filter和使用Servlet3.0配置自定义Filter实战
  15. IE=edge 让浏览器使用最新的渲染模式
  16. Luogu 2762 太空飞行计划 / Libre 6001 「网络流 24 题」太空飞行计划 (网络流,最大流)
  17. 【linux】dpkg info修复及dpkg: warning: files list file for package
  18. Java8的新特性,二进制序列转十进制数字
  19. 2:spring中的@resource
  20. Java heap space 解决方法(转)

热门文章

  1. Kernel Stack Overflow(转)
  2. iPhone Scrollbars with iScroll
  3. layui和jquery冲突:Syntax error, unrecognized expression: +
  4. java在线聊天项目0.9版 实现把服务端接收到的信息返回给每一个客户端窗口中显示功能之客户端接收
  5. 常用JavaScript正则表达式整理
  6. javascript变量名命名规则
  7. (63)zabbix low-level discover zabbix批量部署必备
  8. (19)zabbix Applications使用介绍
  9. Vue的响应式规则
  10. Uiautomator简介及其环境搭建、测试执行