Vue: v-for v-on v-model

Vue 是一套用于构建用户界面的渐进式框架，作者尤雨溪

<div id='app'>  {{ message }}  </div>
new Vue(){      //el是element的简写     el后面跟的是选择器
  el:'#app',
data:{
    message:'Hello Vue.js!'
   }
}

这是创建的一个简单的Vue应用。

一：v-for
body部分:

 <li v-for='value in arr'>   {{Value}}   </li>       //值在arr中循环    value是一个值   可变
 <li v-for='value in obj'>  {{Value}}  </li>        //值在obj中循环    value是一个值   可变
 <li v-for='(value,index) in arr'>  {{index}}==>{{value}}  </li>  //arr的元素对应的下标
 <li v-for='(value,index) in obj'>  {{index}}==>{{value}}  </li>  //obj的元素对应的下标

 <li v-for='value in arrs'>      //输出的是arrs数组中的对象中的元素值
     {{value.name}} 
     {{value.name}}
     {{value.price}}
 </li>

js部分:

new Vue({
el:'#app',
data:{
    arr:[1,2,3,4,5],
    obj:{name:'jack',old:'18'},
    arrs:[
        {num:1,name:'香蕉',price:3},
        {num:2,name:'苹果',price:2},
        {num:3,name:'鸭梨',price:1},
    ]
}
})

二：用V-for做table表格

body代码：

<div class='app'>
  <table border='1' cellspaing='0'>
    <thead>
        <tr>
            <th>编号</th>
            <th>名字</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for='value in arrs'>
            <td>{{value.num}}</td>
            <td>{{value.name}}</td>
            <td>{{value.price}}</td>
        </tr>
    </tbody>
</table>
</div>

js代码：

new Vue({
    el:'#app',
    data:{
        arr:[1,2,3,4,5],
        obj:{name:'jack',old:'18'},
        arrs:[
            {num:1,name:'香蕉',price:3},
            {num:2,name:'苹果',price:2},
            {num:3,name:'鸭梨',price:1},
        ]
    }
})

效果：

12039799-ebf56ab91927f62f.png

三：v-model

body代码:

<div id='app'>            //v-model  双向绑定   一般只用于表单
  <input type='text'  v-model='message'>
  <p>{{message}}</p>
</div>

js代码:

 new Vue({
     el:'#app',
     data:{
         message:''
     }
 })

效果:表单下面的文字会随着表单中的文字的变化而变化

12039799-7deea0311718a6e6.png

四：v-on

点击button会弹出111
body部分:

<div id='app'>
   <button v-on:click='alt'>按钮</button>
</div>

js部分:

new Vue({
   el:'#app',
   data:{
       message:'hello World'
},
methods:{
    alt:function(){
        alert(111)
    }
  }
})

练习：

效果：

12039799-9fff16fcf22c5b4a.png

body代码：

<div id='app'>

<input type='text' class='input' v-model='valu'>
<button v-on:click='text'>点击</button>
  <ul>
      <li v-for='(value,index) in arr'>{{value}}  <button v-on:click='sc(index)'>删除</button>   </li>
  </ul>    
</div>

js部分:

new Vue({

el:'#.app',

data:{

    arr:['apple','prange','banana'],

    valu:''

},

methods:{

    text:function(){

        this.arr.push(this.valu)

         this.valu=''

    },

            sc:function(ind){

                this.arr.splice(ind,1)

            }

   }

})