为什么运行不了!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title选项卡切换效果title meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width initial-scale=10
<p>这段代码无法运行的原因可能有以下几点：</p>
<ol>
<li>
<p>缺少引入Vue.js的代码，需要在<head>标签中添加以下代码：</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</li>
<li>
<p>在Vue实例中的methods中的函数需要用ES6箭头函数来定义，修改为以下代码：</p>
<p>changeTab: (tab) => {
if (tab === 'hit') {
this.currentView = 'hit';
this.isHitmovie = true;
this.isClassicmovie = false;
} else if (tab === 'classic') {
this.currentView = 'classic';
this.isHitmovie = false;
this.isClassicmovie = true;
}
}</p>
</li>
<li>
<p>在组件的template中，需要使用ES6模板字符串，即在反引号``中编写HTML代码，修改为以下代码：</p>
<p>template: `</p>
<div class="main">
<div v-for="(movie, index) in movies">
<span>{{ index + 1 }}</span>
<span>{{ movie.name }}</span>
<span>{{ movie.star }}</span>
<button @click="removeMovie(index)">删除</button>
</div>
</div>
`
</li>
</ol>
<p>修改以上代码后，应该可以正常运行该页面。</p>
原文地址: https://www.cveoy.top/t/topic/0rT 著作权归作者所有。请勿转载和采集!