VUE（四）

点击下载word文档

VUE（四）

1. 条件渲染

        <!--test1：v-if v-else v-else-if指令-->

        <!--注意：    

                v-else元素必须紧跟在带 v-if或者 v-else-if的元素的后面

                v-else-if也必须紧跟在带 v-if或者 v-else-if的元素之后

        -->

        <div id="app">

            <h1 v-if="test==='Yes'">Yes</h1>

            <h1 v-if="test==='yes'">yes</h1>

            <h1 v-else>No</h1>

            <!--template可以看成是一个看不见的包裹元素用来进行块判断-->

            <template v-if="ok">

                <h1>Title</h1>

                <p>Paragraph 1</p>

                <p>Paragraph 2</p>

            </template>

 

        </div>

        <script>

            var vm = new Vue({

                el: '#app',

                data: {

                    test: 'yes',

                    ok: true

                }

            })

        </script>

1. 用key管理可复用的元素

   1. 复用

复用其实就是两个同样的模板在切换的时候，如果仅仅是内容不同时，只替换内容 不会去重新加载组件。

        <!--test2.1可以试试看在切换的时候这里只是替换了placeholder其他的都没有变

            例如你在输入框中输入了文本后点击按钮切换后并没有消失也就是说组件并没有被重新加载-->

        <div id="no-key-example" class="demo">

            <div>

                <template v-if="loginType === 'username'">

                    <label>Username</label>

                    <input placeholder="Enter your username">

                </template>

                <template v-else="">

                    <label>Email</label>

                    <input placeholder="Enter your email address">

                </template>

            </div>

            <button @click="toggleLoginType">Toggle login type</button>

        </div>

        <script>

            new Vue({

                el: '#no-key-example',

                data: {

                    loginType: 'username'

                },

                methods: {

                    toggleLoginType: function() {

                        return this.loginType = this.loginType === 'username' ? 'email' : 'username'

                    }

                }

            })

        </script>

1. 不复用

        <!--test2.2：当我们不需要复用一个组件的时候那么我们可以在不需要复用的组件上加一个唯一标识的key属性这样这个组件就会重新被加载不会在复用-->

        <div id="no-key-example1" class="demo">

            <div>

                <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>

            </div>

            <button @click="toggleLoginType">Toggle login type</button>

        </div>

        <script>

            new Vue({

                el: '#no-key-example1',

                data: {

                    loginType: 'username'

                },

                methods: {

                    toggleLoginType: function() {

                        return this.loginType = this.loginType === 'username' ? 'email' : 'username'

                    }

                }

            })

        </script>

1. v-show指令

        <!--test3：v-show指令和v-if的用法大致一样

            不同的是带有 v-show的元素始终会被渲染并保留在 DOM中。v-show只是简单地切换元素的 CSS属性 display。-->

        <!--注意：v-show不支持 <template>元素，也不支持 v-else。-->

        <div id="app-3">

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

        </div>

        <script>

            var vm = new Vue({

                el: '#app-3',

                data: {

                    test: 'yes',

                    ok: true

                }

            })

        </script>

         

        

        <!--test4:v-if与 v-show的对比-->

        <!--

            v-if是"真正"的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

            v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

            相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS进行切换。

            一般来说，v-if有更高的切换开销，而 v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show较好；

            如果在运行时条件很少改变，则使用 v-if较好。

        -->

         

        

        <!--test5：v-if与 v-for一起使用，v-for具有比 v-if更高的优先级。-->