vue.js 学习

 循环 v-for

可以遍历json数组，也可以遍历json对象的所有属性

<template v-for="(akey,index) in dev.pidList">

v-for  可以直拿数组里的元素 dev in devList，也可以拿下标 (dev, index) in devList

下标从0开始，例如：

rooms: [ {name:"111"}, {name:"222"}, {name:"333"}, {name:"444"}, {name:"555"}],

<template v-for="(room, idx) in rooms ">
    {{  idx + "->" + room.name}}
    <br/>
</template>

输出：

0->111
1->222
2->333
3->444
4->555

点击响应

<button  v-on:click="update_device" >刷新</button>

或者：

<button @click="update_device" >刷新</button>

@click可以放在任何div里。

点击响应函数可以加参数，例如：

    <template v-for="(room, idx) in rooms ">
        <p @click="clickRoom(room)">
        {{  idx + "->" + room.name}}
        </p>
    </template>

    new Vue({
        el: '#app',
        data () {
            return {
                rooms: [ {name:"111"}, {name:"222"}, {name:"333"}, {name:"444"}, {name:"555"}]               
            }
        },
        mounted () {

        },
        methods: {
            clickRoom(room) {
                console.log("you click room:" + room.name)
            }
        }
    })

判断

在 html 中动态控制显示

可以理解为只有 v-if 里的条件成立的时候，该标签 img 才会存在。

    <template v-for="(room, idx) in rooms ">
        <p @click="clickRoom(room)">
        <img v-if="idx == 0" src="static/picture/cat-icon1.png">
        <img v-if="idx == 1" src="static/picture/cat-icon2.png">
        <img v-if="idx == 2" src="static/picture/cat-icon3.png">
        <img v-if="idx == 3" src="static/picture/cat-icon4.png">
        <img v-if="idx == 4" src="static/picture/funfact1.png">
            {{  idx + "->" + room.name}}
        </p>
    </template>

 

其它基础

1 判断字符串相等

<template v-if="dev.category === 'switch'">

2 判断json数组长度

    <template v-if="dev.pidList !== undefined && dev.pidList.length > 1 ">