vue学习笔记

1. 项目需求是左侧展示短信的类型（动态从后台获取），如下：

2. 提交到后台的请求代码如下：

$Yx.AjaxRequest({
    module: 'dataSet',
    method: 'post',
    name: 'MessageQuery.messageCount',
    version: '2.0',
    data:param,
    token: store.getters.token
}).then(resp => {
    me.countList = resp.data.data;
    console.log("左侧菜单及条数"+JSON.stringify(resp.data.data))

}).catch(() => {
    console.log("error")
})

3.页面展示的代码如下：

<div style="width: 150px;height: 500px;float: left;background-color: white">
    <ul style="list-style-type:none;white-space:nowrap;margin-top: 5px;margin-left: 5px">
        <li style="margin-top:15px;margin-left:15px;height: 30px"  v-for="sms in countList" @click="find_notice(sms.smsType)">{{sms.smsTypeName}}<span class="label label-info">{{sms.smsCount}}</span></li>
    </ul>
</div>

重点来了-->

点击左侧短信类型，右侧对应显示短信条数，向后台再次发起请求，需要传递参数，写法如下：

@click="find_notice(sms.smsType)"