NTL01 这个是 Vue.js 的 列表渲染 ,我简单地理一下这个过程,方便理解吧 😃
首先我们看上图的那一行代码,意思是循环迭代绑定的数据对象里面的 tags
字段的数组,tag
代表当前的数组元素,tag.inputting
就是这个元素对象对应 inputting
字段的内容。
这一块对应 这一行 调用 new Vue()
时候传入的对象的 data
字段里的 tags
:
let app = new Vue({
el,
data: {
text: "",
tags: [],
loading: false,
show: false
},
methods: {
submitTran,
nbnhhsh() {
let text = this.text;
app.show = !!text;
if (text) {
_guess(text, data => {
if (data.error) {
app.error = data.error;
} else {
app.error = null;
app.tags = data;
}
});
}
}
}
});
这里 new 返回了一个绑定了变量 el
对应 DOM 元素的 Vue 实例,这里赋值给了变量 app
。
Vue 设计了一种机制,在这里大概就是,app
和上面说的 data
字段传进去的数据对象是一种绑定的关系,你通过 app
这个 Vue 实例对象修改某个属性的话,会触发 Vue 的重新渲染,然后对应渲染出 DOM 元素展示。
理解了这一层背景之后,你可以在 methods 这里指定的 nbnhhsh()
方法里面看到 app.tags = data
这一层的设定。
自然,tag.inputting
就是从这个 data
里面来了。