Vue点击图片查看详情

一、点击事件传值

<router-link :to="{path:'/Particulars/'+item.DId}">
  <img
    :src="item.AMadeImg"
    class="image"
    style="width: 232px; height: 232px"
  />
  <div style="padding: 14px" class="menu-card-detail">
    <strong>菜品名称:{{ item.Headline }}</strong>
    <span>评论:{{ item.Comments }}</span>
    <router-link to="" tag="em">
      作者:{{ item.UserName }}
    </router-link>

二、获取值进行显示

 data() {
    return {
      page: {
        DId: "",
        UserId: "",
        Headline: "",
        PropertyId: "",
        MenuId: "",
        AMadeImg: "",
        AContent: "",
        Main: "",
        Assist: "",
        BMadeImg: "",
        BContent: "",
        Skill: "",
        Comment: "",
      },
      //路径
      url:"http://localhost:49424/"
    };
  },
  methods: {
    getAll() {
      this.$axios
        .get("http://localhost:49424/api/Getshow?id=" + this.$route.params.id)
        .then((res) => {
          this.page = res.data;
        });
    },
  },
  created() {
    this.getAll();
  },
};

三、使用方法

<img :src="url+page.AMadeImg" style="width: 320px; height: 320px" />

 

      待续......