学习使用vue.js（六）绑定数据

vue数据绑定

绑定数据，首先你得有数据，在vue中我们可以使用Axios

1.安装axios

npm i --save axios vue-axios

2.在src/router/index.js中引入并使用

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)

然后你就可以愉快的使用axios了
在.vue文件中你可以这样写：

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
			msg:''//必须得有一个声明，然后数据就会替换到这里
    }
  },
	created(){
		this.axios.get('http://marketpccmsapi.atguat.com.cn/channel/hotword?pageKey=yc_index').then((res)=>{
			console.log(res.data.data)
			this.msg = res.data.data
		})
	}
}
</script>

我请求的数据结构是这样子的：

[
	{xx:zz},
	{xx:zz},
	{xx:zz},
	{xx:zz}
]

然后就是数据绑定了：

<ul>
	<li v-for="item in msg">
		<a href="#javascript:">{{item.hotWord}}</a>
	</li>
</ul>

得到的结果就是：
学习使用vue.js（六）绑定数据

当然你也可以知道每一项的索引：

<ul>
	<li v-for="(item,i) in msg">//注意这里的写法不同（item,i）第一个可以理解是每一项，第二个参数是索引，，，这两个名字都不固定你可以起自己习惯起的变量名
		<a href="#javascript:">{{i}}{{item.hotWord}}</a>
	</li>
</ul>

学习使用vue.js（六）绑定数据
知道了索引一切都变得好操作了。
你也可以给li标签绑定一个事件，然后来操作：

<li v-for="(item,i) in msg" @click="xxx(i)">
	<a href="#javascript:">{{i}}{{item.hotWord}}</a>
</li>


js代码:
methods:{
	xxx:function(i){
		this.msg[i].xxx = xxx
	}
}

要知道，Vue 的核心库只关注视图层，这使得你只需要简单的操作数据，就可以轻松改变视图。

好啦，之后的v-model我想另开一个来写。。
如果有写的不对的，或者你认为不对的，还请各位不吝赐教，让我们一起进步

学习使用vue.js（六）绑定数据

vue数据绑定

相关推荐