Vue.js框架：基本用法（一）

script type="text/javascript" src="js/vue.js">script>

var vm=new Vue({
    el:‘#test‘,
    data:{
        str:‘Hello Vue!!!‘
    }
})

div id="test">
    span>{{ str }}span>    
div>

var vm=new Vue({
    el:‘#test‘,
    data:{
        str:‘Vue‘
    }
})

div id="test">
    span v-if="str===‘Bootstrap‘">Bootstrapspan>
    span v-else-if="str==‘Vue‘">Vuespan>
    span v-else>Nullspan>
div>

var vm=new Vue({
    el:‘#test‘,
    data:{
        students:[
            {name:‘张三‘},
            {name:‘李四‘},
            {name:‘王五‘},
            {name:‘赵六‘}
        ]
    }
})

div id="test">
    ul>
        li v-for="student in students">
            {{ student.name }}
        li>
    ul>
div>

var vm=new Vue({
    el:‘#test‘,
    data:{
        student:{
            name:‘张三‘,
            age:‘18‘,
            sex:‘男‘
        }
    }
})

div id="test">
    ul>
        li v-for="value in student">
            {{ value }}
        li>
    ul>
div>

div id="test">
    ul>
        li v-for="(value,key) in student">
            {{ key }}:{{ value }}
        li>
    ul>
div>

div id="test">
    ul>
        li v-for="(value,key,index) in student">
            {{ index }}--{{ key }}:{{ value }}
        li>
    ul>
div>