More than 3 years have passed since last update.

v-bindディレクティブ [属性へのバインド]　Vue備忘録#2

Last updated at 2022-01-03Posted at 2022-01-03

#バインド時の注意点

v-bindディレクティブを使って属性へのバインドをした時、
下記のように属性バインドしたタグ内のpタグは表示されない。

当然のことなのでしょうか？
何かわかったらまた追記予定。。。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.js app</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="app">
        <div v-bind:text-content.prop="message">
            <p>yeah</p> <!--今のところjsファイルのmessageプロパティが表示されていて、pタグ部分は表示されない-->
        </div>
        <div v-bind:scroll-top.prop="scroll"></div>
    </div>
    <pre>{{ $data }}</pre>  
    <script src="vue.js"></script>
    <script src="main.js"></script>
</body>
</html>

main.js

var vm = new Vue({
    el: '#app',
    data: {
        message: 'hello vue.js!',
        scroll: 0
    },
    mounted: function() {
        this.scroll=100
    }
})
console.log('ok')

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

v-bindディレクティブ [属性へのバインド] Vue備忘録#2

v-bindディレクティブ [属性へのバインド]　Vue備忘録#2