数组特点：

     数组元素，结构，类型 要一致    例如：数组元素为对象，每个对象下的key值都是一样的，value不一样

1.如何判断html上是否改写vue的语法？

          1.看是否是在根模板中编写

        在这个html文件中只能写vue语法吗？

          只要导入文件  啥都可以写

 2.v-for 循环遍历当前选中的模板

             item 是声明的变量， 作用域：当前元素以及子孙元素

             in   是一个关键字

             5    是循环遍历的次数（或者可以是对象）

             循环五次，就会创建 五个子模板

3.当v-for 遇到数组的时候怎么办？

            v-for遍历模板次数等于数组的长度

            item 表示数组元素

            index 表示索引值

 4.当 v-for 遇到 v-if 会怎么样

            条件渲染   bug： Property "item" was accessed during render but is not defined on instance. (item没有定义)

            v-if 优先于 v-for 执行

            所以当 v-if 执行的时候；使用 item变量，这个时候v-for没执行，所以item没有定义

            注意：当v-for和v-if 在同一个标签上写的时候，才会存在优先级问题

            解决方式：v-for先执行 在执行v-if     将v-for绑定到父级元素上

<body>
    <div id="app">
        <h1 v-for="item in 5">1</h1>

          <div v-for="(ite,index) in article">
             <div>
                 <img :src="ite.imgs" alt="">
                 <span>{{ite.title}}</span>
                 <span>{{ite.time}}</span>
             </div>
             <div>
                {{ite.context}}
             </div>
             <div>
                 <span v-for="item in ite.tags.split(' ')" style="display: inline-block;padding: 10px;margin: 1px;background-color: red;">{{item}}</span>
             </div>
          </div>
           <!-- <h2 v-for="item in 5" v-if="item>3">{{item}}</h2> -->
           <!-- template  vue中内置的组件，转义后为空标签 -->
           <template v-for="item in 5">
            <!-- 
                默认 渲染五个  有了 v-if 渲染的是 满足 v-if条件的标签
                item>3 为true 就是满足条件
             -->
                <h2 v-if="item>3">{{item}}</h2>
           </template>


    </div>
    
    <script>
        const app=Vue.createApp({
            
            data() {
                return {

                 article:[
                    {
                        title:'参与了  大学生',
                        imgs:'https://assets.leetcode.cn/aliyun-lc-upload/users/may-hanjing/avatar_1665188001.png?x-oss-process=image%2Fresize%2Ch_44%2Cw_44%2Fformat%2Cwebp',
                        context:'网络：一．讲一下网络五层模型，每一层的职责？二．计算机网络输入URL到看到网页过程描述三．TCP 三次握手的目的是什么？为什么不用两次和四次？四．挥手为什么需要四次呢？三次不行吗？五．TCP 在四次挥手的过程中为什么客户端最后还要等待 2MSL六．TCP 长连接和短连接有什么区别？七．HTTP容',
                        tags:'Java 前端 后端', 
                        time:'一小时前',
                    },
                    {
                        title:'参与了  后端八股文一二（网络和操作系统）——答案已删除',
                        imgs:'https://assets.leetcode.cn/aliyun-lc-upload/users/may-hanjing/avatar_1665188001.png?x-oss-process=image%2Fresize%2Ch_44%2Cw_44%2Fformat%2Cwebp',
                        context:'有一起刷题的嘛Java的然后一起找工作',
                        tags:'Java 前端 后端',
                        time:'二小时前', 
                    },
                    {
                        title:'参与了  我用chatgpt参加了上周的虚拟竞赛，真的是人工智障哈哈',
                        imgs:'https://assets.leetcode.cn/aliyun-lc-upload/users/may-hanjing/avatar_1665188001.png?x-oss-process=image%2Fresize%2Ch_44%2Cw_44%2Fformat%2Cwebp',
                        context:'有一起刷题的嘛Java的然后一起找工作',
                        tags:'Java 前端 后端',
                        time:'仨小时前', 
                    }]
                }
            },

        })

        app.mount("#app");//指定vue根模板 
    </script>
</body>