87,996
社区成员
发帖
与我相关
我的任务
分享2. 使用prop将vue的数组数据[‘HTML’,’CSS’,’JavaScript’]传递到组件my-item中并显示在页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<style>
</style>
</head>
<body>
<!-- 注册局部组件 -->
<div id="app">
<my-item :HTML= "HTML" :CSS="CSS" :JavaScript="JavaScript"></my-item>
</div>
<template id = "item">
<div>
<p>1.{{HTML}}</p>
<p>2.{{CSS}}</p>
<p>3.{{JavaScript}}</p>
</div>
</template>
<script>
Vue.component('my-item',{
props:['HTML','CSS','JavaScript'],
template:'#item'
})
var vm = new Vue({
el:'#app',
data:{
HTML:'HTML',
CSS:'CSS',
JavaScript:'JavaScript',
}
})
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
葉幺 2020-11-13
- 打赏
- 举报
17-24行 要放在id=“app” 的div里面
similing 2020-11-13
- 打赏
- 举报
一句话说明白你的问题：
html的属性不区分大小写
楼上可能没完整看你的代码。
我这里把你所有属性都改成了纯小写，结果是正常的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<!-- 注册局部组件 -->
<div id="app">
<my-item :html="html" :css="css" :javascript="javascript"></my-item>
</div>
<template id="item">
<div>
<p>1.{{html}}</p>
<p>2.{{css}}</p>
<p>3.{{javascript}}</p>
</div>
</template>
<script>
Vue.component('my-item',{
props:['html','css','javascript'],
template:'#item'
});
var vm = new Vue({
el:'#app',
data:{
html:'HTML',
css:'CSS',
javascript:'JavaScript',
}
})
</script>
</body>
</html>
泡泡鱼_ 2020-11-12
- 打赏
- 举报
值用外面再单引号装起来，否则它会在当前寻找属性或方法名称为：HTML,CSS,JavaScript
<my-item :HTML= '"HTML"' :CSS='"CSS"' :JavaScript='"JavaScript"'></my-item>
