七、v-for列表数据双向绑定更新

最新推荐文章于 2024-04-23 16:51:15 发布

前端之家

最新推荐文章于 2024-04-23 16:51:15 发布

阅读量4.1k

点赞数

分类专栏： VUEJS技术文章标签： VUE VUEjs

本文链接：https://blog.csdn.net/qq_41761746/article/details/80250647

版权

VUEJS技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、v-on:click="addItem"在methode选项里进行方法设置

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vuedemo</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

//引入vue框架
import Vue from 'vue'
import App from './App'

new Vue({
	el:'#app',
	render: function (h){
		return h(App)
	}
})

VUE

<template>
  <div>
  <ul>
    <li v-for="(item , index) in list"  :class="{odd : index%2}">
     <span> {{ item.name}}</span>
     <em> {{ item.age}}</em>
     <p>{{index}}</p>
    </li>
    <button v-on:click="addItem">addItem</button>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
export default{
data (){
    return{
//循环一个数组
    list:[
    {
      name:"我是数组循环数据",
      age:"我是第一个数据"
    },
    {
      name:"我第二条数据",
      age:"我是第二个数据"
    }
    ]
    }
  },
  methods:{ //方法设置选项
    addItem:function (){
      Vue.set(this.list,0,{//修改列表数据
        name:"我是修改的数据",
        age:"我是修改的数据"
      }),
      console.log(this.list[1].name),
      this.list.push({ //新增数据
           name:"我是后增加的数据",
            age:"我是后增加的"
      })
    }
  }
}
</script>

前端之家

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
七、v-for列表数据双向绑定更新

1、v-on:click="addItem"在methode选项里进行方法设置HTML&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,in
复制链接

扫一扫