Question

我创建了一个 «numberMatch» 方法，该方法在点击时在标签中推送存储在变量中的 gif。该方法运行良好，但是当我调用模板中的选项卡而不是 gif 时，它是显示为字符串值的 gif 路径。有人可以告诉我如何使 gif 正确显示在页面上吗？模板标签页中显示图片的div是这个：

<div>{{this.gifTab}}</div>

<script>

export default {
   name:'Body',
   data() {
       return {
           luckyNumber:'',
           randomNumber:'',
           number: 0,
           gifCharles:require("../assets/jpg/isolation-charles.png"),
           gifTab:[],
           scoresTab:[],
           total:0,
       }
   },

       methods: {
           RandomNumbGenerator(){
               this.randomNumber =  Math.floor(Math.random()*11);
               return this.randomNumber
           },

           InputValue(){
               this.luckyNumber = document.getElementById("input_lucky_numb").value;
           },

           NumberMatch(){
               if(this.randomNumber == this.luckyNumber){
                 var tabGif = this.gifTab.push(this.gifCharles)
                 return tabGif
               }
           }
       },
};
</script>

Answer 1

您需要添加一个。

替换

# display(df.T.head())
      1990  1991  1992  1993  1994  1995  1996  1997  1998  1999  2000  2001
col1     0     1     0     2     4     7     5     0     1     5     3     6
col2     4     7     5     7     1     0     1     4     3     7     8     0
col3     7     5     0     0     5     6     1     7     7     1     5     4
col4     3     0     1     0     5     4     4     5     0     1     0     1
col5     7     8     9     6     8     8     6     5     7     6     3     7

# transpose and plot
axes = df.T.plot(kind='bar', subplots=True, layout=[3, 4], figsize=(15, 7), legend=False, rot=0)

# to change ylim of the subplots, if needed
for ax in axes.flatten():
    ax.set_ylim(0, 30)

与

{{this.gifTab}}

图片不显示在标签 Vuejs

1 个答案: