LoginSignup
0
0

More than 1 year has passed since last update.

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

Last updated at Posted 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')
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0