Vue列表与循环


Vue循环案例

我们先创建一个list的数组并在template声明

data(){
           return{
           list:['1-Stan','2-梅姐','3-Rod Stewart']
            }
        },
 template:`
        <div>
             <ul>
                <li v-for="(item,index) of list">{{index}}·{{item}}</li>    
             </ul>
        </div>        

这里要提三点

`   符号 是表示多行写, 单个双引号是单行写。

循环v-for的数据是list,list中的每一项我会放到item中,然后使用字面量在模板中进行展示就可以了。

index表示索引

动态增加数据

先来做一个简单的效果,就是点击按钮后,就增加一个佳丽到列表中。先去掉数组中的值,然后来写一个按钮,按钮绑定handleAddItem事件。代码如下:

<script>
    Vue.createApp({
        data() {
            return {
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push("歌手")
            }
        },
        template: `
            <div>
                <button v-on:click="handleAddItem">增加歌手</button>
                <ul>
                    <li v-for="(item,index) of list">[{{index}}]{{item}}</li>
                </ul>
            </div>

        `
    }).mount("#app")
</script>

现在增加的数据都是一样的,而我们最终的目的是能够自定义的增加不一样的数据这个时候我们就需要一个input输入框了.而且需要用v-model指令,进行绑定。代码如下。

<script>
    Vue.createApp({
        data(){
           return{
            // list:['1-Stan','2-梅姐','3-Rod Stewart']
            list:[],
            inputtext:""
           }
        },
         methods:{
             onclickitm(){
                 this.list.push(this.inputtext)
                 this.inputtext=""
             }
         }, 
         template:`
        <div>
            <input v-model="inputtext"/>
            <button v-on:click="onclickitm">增加歌手<button>
            <ul>
                <li v-for="(item,index) of list">{{index}}·{{item}}</li>    
             </ul>
        </div>        
   `   
    }).mount("#app")
</script>

不清楚我的这个案例怎么会这么丑,有的也不一样,不知道是浏览器的情况还是Web什么原因,总是咱们功能是实现了,有知道的小伙伴麻烦留言告诉我一声.


文章作者: Bibooo
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Bibooo !
评论
  目录