The data in vue cannot be rendered?

<div class="layout-right-top">
    <h3>:{{message}}</h3>
    <h3 style="margin-top: 20px;">:23</h3>
</div>

-sharpdata
data:function (){
    return{
        message:"hello"
    }
}

but it doesn"t render like this that message, is empty?
but if you change it to an input box, you can render it with v-model binding? What"s the reason?

<div class="layout-right-top">
    <input v-model="message">:{{message}}</input>
    <h3 style="margin-top: 20px;">:23</h3>
</div>

Vue.js javascript html5 html typescript

Jul.04,2021

did you report anything wrong? Take a look at the console, it should be written correctly

I suggest you take a look at the basic vue tutorial, vue form binding requires v-model instructions.

Why is there a colon after the data function return < del > ~ < / del > ~

upstairs eye tip. It is recommended that you use vscode or IDE, with code errors.

I also encounter this problem

if an error occurs in the editor.

< code "error" >

I also encounter this problem

Previous: Maven Packaging jar, how to specify the directory of configuration resource files

Next: Amap is a little confused about the division of administrative areas.