web项目开发之vue实操点滴

1、调试辅助方法console.log()
可以将自己希望看到的内容通过这个方法输出后在浏览器控制台查看

//想看一下ret.data的数据结构	
loadDetail() {
				if (this.id != undefined && this.id != '') {
					http.postData(this, apiPath + "/affair/sd/job/view/" + this.id, {}, (ret) => {
						console.log("======ret.data======"+JSON.stringify(ret.data));
							if (ret.code == Constants.STATUS_SUCCESS) {
								this.form = ret.data;
							}
						}
					);
				}
			},

2.JSON.stringify()将一个json对象按照字符串形式输出
1中如果直接console.log(ret.data)，那么在浏览器控制台看到的是[object,object]
通过stringify()这个方法就可以看到对象中的内容了。
3.for循环v-for
<p v-for="item in form.tables">{{item.job_table}} ---->{{item.sync_status}}</p>
4.if判断else if

<div v-for="item in form.tables">{{item.job_table}}   ======》
   <span v-if="item.sync_status==0">等待执行</span>
   <span v-else-if="item.sync_status==1">同步成功</span>
   <span v-else-if="item.sync_status==2">同步失败</span>
</div>

5.select事件on-change，修改页面其他文本框内容，实现select联动效果

<i-select v-model="form.dbIP"  :label-in-value="true" style="width:200px" @on-change="setIP">
   <i-option v-for="item in dbNameReadList" :value="item.dbIP"  :key="item.id">{{item.dbNameRead}}</i-option>
</i-select>

:label-in-value="true" 触发事件会将标签名和value同时传给事件方法
setIP 下选框事件触发时调用的方法（及item.dbIP和item.dbNameRead这两个值）

setIP(val){
   this.form.dbNameRead = val.label;
   this.form.dbIpRead = val.value;
   this.form.dbIP = val.value;
   console.log("==============="+JSON.stringify(val.label))
}

on-change事件触发调用setIP（）方法，同时将select相应的值赋给表单中相应的属性区域（比如说v-model="form.dbIpRead"这个文本框）
多选效果实现

6、router注册模块
没新增一个前端链接，需要到router中进行注册，链接地址才能生效。

【参考网址】
http://v1.iviewui.com/docs/guide/install

来源：oschina

链接：https://my.oschina.net/guiguketang/blog/4557702

标签

Label In

Vue.js