Vue.js(二)---相关语法介绍第三部分

vue中v-for的使用

        

        

        
    
    
        


            


                
{{item}}

            


        


    
    

?

html>
    head>
        meta charset="utf-8">
        title>v-for遍历对象title>
        script type="text/javascript" src="js/Vue.js">script>
    head>
    body>
        div id="app">
            ul>
                li v-for="(key,value) in product">{{key}}={{value}}li>
            ul>
        div>
    body>
    script>
        new Vue({
            el:‘#app‘,
            data:{
                product:{
                    id:1,
                    name:"笔记本电脑",
                    price:5000
                }
            }
        });
    script>
html>
?
?

    

        

        

        
    
    
        


            
                
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                
            


序号
编号
名称
 
价格



{{index+1}}
{{product.id}}
{{product.name}}
{{product.price}}
 




        


    
    

?

vue中v-model的使用(可以从json格式数据中取值)

html>
    head>
        meta charset="utf-8">
        title>v-modeltitle>
        script type="text/javascript" src="js/Vue.js">script>
    head>
    body>
        div id="app">
             form action="" method="post">
                用户名：input type="text" name="username" v-model="user.username" />br />
                密码：input type="text" name="password" v-model="user.password" />
            form>
        div>
    body>
    script>
        new Vue({
            el:‘#app‘,
            data:{
                user:{
                    username:"admin",
                    password:"admin"
                }
            }
        });
    script>
html>
?