作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我真的是 Vue 的新手,对于这个项目,我试图在 div 中加载 Canvas 。如果 Canvas 在 div 之外加载,它可以正常工作,但我想在 loadModal
为 true 时显示 Canvas 。在此代码中,我使用了两个 Canvas ,一个在 div 内部,另一个在 div 外部。它仅在 div 之外正确加载 Canvas 。有没有办法在 div 中加载 Canvas ?下面是我在 JsFiddle 上的代码
JsFiddle 代码 = https://jsfiddle.net/ujjumaki/6vg7r9oy/9/
查看
<div id="app">
<button @click="runModal()">
Click Me
</button>
<br><br>
<div v-if="loadModal == true">
<canvas id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3; color:red;">
</canvas>
</div>
<!-- this one loads correctly -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
</div>
方法
new Vue({
el: "#app",
data: {
loadModal: false,
},
methods: {
runModal(){
this.loadModal = true;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
}
}
})
最佳答案
尝试使用 v-show
并使用 class 而不是 id,这样您就可以选择所有 div:
new Vue({
el: "#app",
data: {
loadModal: false,
},
methods: {
runModal(){
this.loadModal = true;
const c = document.querySelectorAll("canvas");
c.forEach(can => {
let ctx = can.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
})
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="runModal()">
Click Me
</button>
<br><br>
<div v-show="loadModal == true">
<canvas class="canvas" id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3; color:red;">
</canvas>
</div>
<canvas class="canvas" id="myCanvas" width="200" height="100" style="border:3px solid #d3d3d3; color:red;">
</canvas>
</div>
关于javascript - 如何使用 Vue 在 div 中加载 Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69530445/
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是,它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
我只是无法弄清楚这一点,也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录,并在我的网页上以每个面板 12 条的倍数显示它们。因此,我需要知道有多少个面板可以使用 JavaScrip
我是一名优秀的程序员,十分优秀!