为啥vue的内联样式无效？ p标签里的内容打印不出来
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥vue的内联样式无效？ p标签里的内容打印不出来相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue7-24</title>
</head>
<body>
<div id="app">
<child-component inline-template>
<div>
<h2>在父组件中定义子组件的模板</h2>
<p> message </p>
<p> msg </p>
</div>
</child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
Vue.component('child-component',
data:function()
return
msg:'在子组件声明的数据'
)
var app = new Vue(
data: message:'在父组件声明的数据'
)
</script>
</body>
</html>
浏览器输出的是：
在父组件中定义子组件的模板
message
msg
自己看出问题了。。。
第一个问题和楼下说的一样，没绑定。。el:'#app'
第二个问题就是没弄明白inline-template的真正功能，只是给组件标签使用inline-template特性，组件就会把它的内容当做模板，它并没有我想的那么强大。。 父子组件间传递数据还是要用props的。
<div>
<p>内联模板</p>
<p>父组件数据: message </p>
<p>子组件数据: msg </p>
</div>
</child-component>
Vue.component('child-component',
props:['message'],
data: function()
return
msg: '在子组件声明的数据'
);
props传一下 参考技术A 代码好像没问题，看不出追问
书上的源代码，我照着打了一遍，怎么也出不来效果。。。
追答
vue7-24
message
var app=new Vue(
el:'#app',
data:
message:'hhh'
)
你试下这个，好像是你没绑定DOM元素 el:'#app',
Vue 内联样式的数据绑定
Vue 内联样式的数据绑定
之前学的是数据绑定 class，现在可以将数据绑定到 style 中。
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }">内联样式绑定</div>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
activeColor: ‘green‘,
fontSize: 30
}
})
</script>以上是关于为啥vue的内联样式无效？ p标签里的内容打印不出来的主要内容，如果未能解决你的问题，请参考以下文章