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>
得到的结果就是:
当然你也可以知道每一项的索引:
<ul>
<li v-for="(item,i) in msg">//注意这里的写法不同(item,i)第一个可以理解是每一项,第二个参数是索引,,,这两个名字都不固定你可以起自己习惯起的变量名
<a href="#javascript:">{{i}}{{item.hotWord}}</a>
</li>
</ul>
知道了索引一切都变得好操作了。
你也可以给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我想另开一个来写。。
如果有写的不对的,或者你认为不对的,还请各位不吝赐教,让我们一起进步