0723掰棒子记录--vue的数据渲染

问题1：想要在一个panel标签中添加一个图片，panel中有一个datalist属性。如何设计标签可以插入想要的图片。

template：

  <panel :list="dataList"></panel>

script：

export default {
      components: {ViewBox,Panel},
      name: "home",
      data() {
        return {
          dataList:[{
            src:this.$store.state.getCookie('headImg'),
            title:this.$store.state.getCookie('name')+"<i></i>",
          }]
        }
      },

解决办法：在datalist的title属性中添加图片标签（以string相加的形式），并且用name对性别进行判断。panel组件是vux库中的一个组件，详细的使用见https://vux.li/demos/v2/#/component/panel

export default {
      components: {ViewBox,Panel},
      name: "home",
      data() {
        let name = this.$store.state.getCookie('name');
        let icon_sex_woman = sex_woman;
        // alert(name);
        if(name != '杨紫'){
          icon_sex_woman=sex_man;
        }
        return {
          dataList:[{
            src:this.$store.state.getCookie('headImg'),
            title:this.$store.state.getCookie('name')+"<i></i><img src="+ icon_sex_woman +" style='width:0.8445789rem;margin-top:0.0767rem; margin-right:0.9rem ;margin-left:0.617rem;'/>",
          }]
        }
      },

问题2：在vue中css样式的导入，less是一种预处理css样式。

<style lang="less">

  @import '~vux/src/styles/reset.less';

</style>