模板可以写在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>
网友回复
python+Quill如何实现多人实时文档编辑html?
什么是ai的6A工作流规则?
&、nohup、screen、tmux在linux中后台执行的区别?
python如何将调用ai大模型生成的文件修改行操作指令修改原文件后保存?
python如何将2d平面线图转换成数字2d线稿图?
acejs代码编辑器如何调用openai api实现选择代码修改与代码自动补全?
ace.js如何获取选择文本的开始和结束行数?
如何把qwen code cli或gemini cli的免费调用额度换成http api对外开放接口?
如何限制windows10电脑只能打开指定的程序?
python如何调用ai大模型实现web网页系统的功能测试并生成测试报告?