读Vue.js实战第五、六章_vue第六章课后作业答案-优快云博客

本文链接：https://blog.youkuaiyun.com/u011133966/article/details/79008098

内置指令

v-cloak 它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和css的display：none配合使用；

   <div v-cloak>{{ message }}</div>

可以用来隐藏双括号配合css使用不会闪动；
v-once 作用是定义它的元素或者组件只渲染一次包括元素或者组件的所有子节点。首次渲染后，不再随数据的变化重新渲染；

条件渲染指令

与js中的条件语句if、else、else if 类似

  <div id="app">
            <div v-once>
                <p v-if="status === 1">当status为1时显示改行</p>
                <p v-else-if="status === 2">当status为2时显示改行</p>
                <p v-else>否则显示改行</p>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    message: '这是一段文本',
                    status: 2
                }
            });
        </script>

 <div id="app">
            <template v-if="type === 'name'">
                <label for="">用户名</label>
                <input type="text" placeholder="输入用户名" key="name-input">
                <!--<input type="text" placeholder="输入用户名">-->
            </template>
            <template v-else>
                <label for="">邮箱</label>
                <input type="text" placeholder="输入邮箱" key="mail-input">
                <!--<input type="text" placeholder="输入邮箱">-->
            </template>
            <button @click="handleToggleClick">切换输入类型</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    type: 'name'
                },
                methods:{
                    handleToggleClick:function () {
                        this.type = this.type === 'name' ? 'mail' : 'name';
                    }
                }
            });
        </script>

当加上key后,切换类型时内容会被删除；

v-show不能再template上使用

条件渲染V-for

<div id="app">
    <ul>
        <li v-for="book in books">{{book.name}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            books:[
                {name:'<<vue.js实战>>'},
                {name:'js语言精髓'},
                {name:'js高级程序设计'}
            ]
        }
    })
</script>

v-for也可以用在内置标签template上；

<div id="app">
            <ul>
                <template v-for="book of books">
                    <li>书名：{{book.name}}</li>
                    <li>书名：{{book.author}}</li>
                </template>
            </ul>

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    books:[
                        {
                          name:'vue实战',
                          author:'梁晶'
                        },
                        {
                            name:'java语言精髓',
                            author:'dc'
                        },
                        {
                            name:'js',
                            author:'c.zakas'
                        }
                    ]
                }
            });
        </script>

v-for还可以迭代整数

数组跟新方法

push()、pop()、shift（）、unshift（）、splice（）、sort（）、reverse（）//调用这些方法会同步视图数据，而filter、concat、slice不会同步视图数据！

如果需要设置数组的长度可用app.books.splice来解决
如果添加数组可用vue.set() || app.set() || this.$set() 解决

第六章表单与V-MODEL
v-model指令是对数据的双向绑定；
如果需要数据拼音阶段实时更新则需要用@input来替代v-model

<div id="app" v-cloak>
            <textarea @input="handleInput" placeholder="输入..." ></textarea>
            <input type="text" @input="handleInput" placeholder="第二行输入">
            <p>输入的内容是：</p>
            <p style="white-space: pre">{{ message }}</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:''
                },
                methods:{
                    handleInput:function (e) {
                        this.message = e.target.value;
                        console.log(e.target);
                    }
                }
            });
        </script>