学习Vue竟如此简单(接上)_for( [key,value] in obj)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57180500/article/details/123121162

列表渲染

v-for ：我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key，不建议使用index作为key的值（只要key的值唯一就行）

演示：

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item">{{item}}-{{index+1}}</li>
        </ul>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    list:["vue","react","angular","js"]
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

你也可以用 v-for 来遍历一个对象的 property。如：

<body>
    <div id="app">
        <div v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</div>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    obj:{title:"Vue3入门",state:"轻松",pdate:"2022-02-24"}
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数如：

注意：我们不推荐在同一元素上使用 v-if 和 v-for可以把 v-for 移动到 <template> 标签中来修正：

<body>
    <div id="app">
        <template v-for="item in 10">
            <p v-if="item%2===0">{{item}}</p>
        </template>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {}
            }
        }).mount("#app")
    </script>
</body>

结果：

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<button @click="counter++">{{counter}}</button>
<button v-on:click="counter--">{{counter}}</button>


Vue.createApp({
  data() {
    return {   counter: 1   }
  }
}).mount('#app')

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称

<body>
    <div id="app">
        <!-- <button v-on:click="num++">{{num}}</button>
        <button @click="num++">{{num}}</button> -->
        <p>
            <button @click="say">点我</button>
        </p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                say(e) {
                    console.log(e, e.target);
                    alert("别点了,别点了，再点就没了")
                }
            }
        }).mount("#app")
    </script>
</body>

结果：

内联处理器中的方法：除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法

<body>
    <div id="app">
        <p>
            <button @click="say('叫你点你就点啊',$event)">点我</button>
        </p>
        <p>
            <button @click="say(num,$event)">{{num}}</button>
        </p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                say(msg,e) {
                    alert(msg);
                    this.num++;
                    console.log(e,e.target);
                }
            }
        }).mount("#app")
    </script>
</body>

结果：