Vue基础——内置指令2

+ 条件显示指令 v-if 和 v-show

      V-show的本质：通过CSS样式 display:none来控制显示与否的

      V-if 和 v-show 的区别：

                V-if：  动态添加移除元素DOM节点（效率低）

                V-show：通过把CSS样式display:none;来控制DOM节点显示隐藏（效率高）

+ 列表渲染指令 v-for

     v-for：遍历

     <li v-for="(item,index) in list">  要遍历的项当中的参数有几个就写几个，大于1个就用括号括起来

      V-if与v-for一般不合用（一般会把v-if提前，或者过滤出需要判断的数据放入一个新的数组中使用）

+ 表单处理指令 v-model

     v-model：实现表单数据双向绑定  

     message的值  <=====>  输入框的值

     1. 获取输入框值

          event.target.value

     2. 输入框内容改变执行 input事件

           message =  event.target.value

     vue内部会把data选项中的return里面的数据动态绑定到vue实例对象上

条件显示指令 

        const { createApp } = Vue
        const App = {
            data() {
                return {
                    title: 'v-for指令',
                    list: [
                        { id: 1001, name: 'javascript高级编程', price: 88.98 },
                        { id: 1002, name: 'vue高级编程', price: 108.89 },
                        { id: 1003, name: 'css高级编程', price: 68.89 },
                    ],
                    message: 'vue学习',
                    content: '',
                    state: false
                }
            },
            /*html*/
            template: `

                <p>----条件显示指令-----</p>
                <p v-if="onLine === 0">在线</p>
                <p v-else-if="onLine === 1">隐身</p>
                <p v-else>离线</p>
                <p v-show="show">显示</p>
            `
        }
        createApp(App).mount('#app')

列表渲染指令 v-for 

template: `
<p>----列表渲染指令 v-for-----</p>
<h2>{{title}}</h2>,
<ul>
   <li v-for="(item,index) in list">{{index}} {{item.id}} {{item.name}} {{item.price}}</li>    
</ul>

<table>
   <tr>
     <th>索引号</th>
     <th>ID</th>
     <th>名称</th>
     <th>价格</th>
   </tr>
   <tr v-for="(item,index) in list ">
     <td>{{ index }}</td>   
     <td>{{ item.id }}</td>   
     <td>{{ item.name }}</td>   
     <td>{{ item.price }}</td>   
   </tr>   
</table>
`

表单处理指令 v-model 

methods: {
    // methods选项方法不能用箭头函数,因为箭头函数没有this
    bindInput() {
        console.log('bindInput >>>>', event.target.value)
        //2. this: vue实例对象
        this.message = event.target.value
    }
},
template: `
<p>-----表单处理指令 v-model----</p>
<p>{{message}}</p>
<input type="text" :value="message" @input="bindInput"/>

<p>v-model指令  content <-> inputValue</p>
<p>{{ content }}</p>
<input type="text" v-model="content"/>

<p>复选框</p>
{{state?'yes':'no'}}
<input type="checkbox" v-model="state"/>
`

如何消除vue未加载时页面显示大括号闪烁的问题? 使用v-clock

            如果网速慢，而该标签内容是变量没有请求响应回来的时候，页面上先不显示该标签（vue给该标签加了css样式        ），当响应回来的时候改标签默认将css样式去除。此指令可以解决使用插值表达式页面闪烁问题将该指令加在html标签中时，style中设置样式[v-clock]{display：none}

    <style>
        [v-clock]{
            display: none;
        }
    </style>