如何使用vue.js仅加载特定的javascript代码?

时间:2018-07-07 04:28:54

标签: javascript vue.js

我只想调用执行演算的代码来根据某些数组的值绘制正弦波,就像计算余弦的代码一样。数组不在代码中,而只是控制调用或不调用代码的一种方法。

我试图做一个箭头函数,让一些变量接收并放在数组上,但是我不知道我是否做对了才行。

<template>
 <div id="origin">
  <div class="seno">
     <article class="tile is-child box">
       <h4 class="title">{{msg}}</h4>
      <div ref="seno"></div>
    </article>
  </div>
  <div v-if="isCosine" class="cosseno">
    <article class="tile is-child box">
       <h4 class="title">{{msg}}</h4>
      <div ref="cosseno"></div>
    </article>
  </div>
  <div class="btn-group">
    <button v-on:click="verify('seno')" class="buttonOption">Seno</button>
    <button v-on:click="verify('cosseno')" 
       class="buttonOption">Cosseno</button>
    <button v-on:click="verify('tangente')" 
       class="buttonOption">Tangente</button>
  </div>
  </div>
</template>

<script>
    import Plotly from 'plotly.js'
    export default {
        name: 'Seno',
        mounted() {
            var frames = [{
                name: 'sine',
                data: [{
                    x: [],
                    y: []
                }]
            }];
            var n = 100;
            for (var i = 0; i < n; i++) {
                var t = i / (n - 1) * 2 - 1;
                // A sine wave:
                frames[0].data[0].x[i] = t * Math.PI;
                frames[0].data[0].y[i] = Math.sin(t * Math.PI)
            }
            Plotly.plot(this.$refs.seno, [{
                x: frames[0].data[0].x,
                y: frames[0].data[0].y
            }], {
                margin: {
                    t: 0
                }
            });
            // This code below that I want to load after an event click 
            var frames = [{
                name: 'sine',
                data: [{
                    x: [],
                    y: []
                }]
            }];
            var n = 100;
            for (var i = 0; i < n; i++) {
                var t = i / (n - 1) * 2 - 1;
                // A cosine wave:
                frames[0].data[0].x[i] = t * Math.PI;
                frames[0].data[0].y[i] = Math.cos(t * Math.PI)
            }
            Plotly.plot(this.$refs.seno, [{
                x: frames[0].data[0].x,
                y: frames[0].data[0].y
            }], {
                margin: {
                    t: 0
                }
            });
            // Until here
        },
        data() {
            return {
                msg: 'Guess the function below!',
                isCosine: false,
                options: ['seno', 'cosseno', 'tangente']

            }
        },
        methods: {
            verify(dado) {
                if (dado == 'seno') {
                    this.$router.replace({
                        name: "Certo"
                    });
                } else {
                    this.$router.replace({
                        name: "Errado"
                    });
                }
            },
            beforeMount() {

            },
        }
    }
</script>

0 个答案:

没有答案