模板可以写在html中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板引入</title>
</head>
<body>
<div>
<my-component-b></my-component-b><!--可以把my-component-b看做一个对象-->
</div>
<template id="my-template">
<div>
<h2>{{name}}</h2>
<button @click="count++">{{count}}</button>
<ul>
<li v-for="item in numArray">{{item}}</li>
</ul>
</div>
</template>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
<script>
new Vue({
components: {
"my-component-b": {
template: '#my-template',
data() {
return {
name: '欢迎来到bfw',
numArray: [1, 2, 3, 4, 5],
count: 0
}
}
}
}
}).$mount('div');
</script>
</body>
</html>
component可以动态引入，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态组件</title>
</head>
<body>
<div>
<button @click="selectName='my-component-a' ">a</button>
<button @click="selectName='my-component-b' ">b</button>
<button @click="selectName='my-component-c' ">c</button>
<component :is="selectName"></component>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
<script>
new Vue({
data: {
selectName: 'my-component-a'
},
components: {
"my-component-a": {
template: '<h1>欢迎来到bfw</h1>'
},
"my-component-b": {
template: "<a href='https://www.bfw.wiki'> bfw.wiki</a>"
},
"my-component-c": {
template: "<p>一个it人必备的网站</p>"
},
}
}).$mount('div');
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
最新提问
seedance2如何根据一张九宫格分镜头图片生成ai视频短剧？
www.gstatic.com打开报错net::ERR_TUNNEL_CONNECTION_FAILED
果蝇大脑神经在计算机中复原意味人脑神经和意识也可在计算机中复原？
cosyvoice-v3.5声音克隆报错：Error during speech synthesis: start speech synthesizer failed within 5s.
html如何实现二进制程序转成汇编代码？
python如何通过音色描述和说话内容生成语音？
python如何通过api调用Seedance 2.0 模型生成视频？
如何使用grok imagine免费生成10分钟ai短片？
ai能破解exe文件重写源代码吗？
浏览器除了于Chromium内核还有其他的不用于Chromium内核的浏览器吗？
