11-条件渲染

    条件渲染:
        1.v-if
            写法:
                    (1).v-if="表达式" 
                    (2).v-else-if="表达式"
                    (3).v-else="表达式"
            适用于:切换频率较低的场景。
            特点:不展示的DOM元素直接被移除。
            注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。

        2.v-show
            写法:v-show="表达式"
            适用于:切换频率较高的场景。
            特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
            
        3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染title>

    
    <script type="text/javascript" src="../js/vue2.js">script>

head>
<body>

    
    <div id="root">
        <h2>当前的n值是:{{n}}h2>
        <button @click="n++">点我n+1button>
        
        <h2 v-show="true">老是你好好lowh2>
        <h2 v-show="1 === 1">vueh2>

        <div v-if="n === 1">Angulardiv>
        <div v-else-if="n === 2">Reactdiv>
        <div v-else-if="n === 2">Vuediv>
        <div v-else>物料div>

        
        
        <template v-if="n === 1">
            <h2>Angularh2>
            <h2>Reacth2>
            <h2>vueh2>
        template>
    div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                n:0
            }
        })
    script>
body>
html>

你可能感兴趣的:(vue,vue.js,javascript,前端)