第二章 Vue快速入门--8 v-bind指令的学习

￡神魔★判官ぃ 2021-11-04 11:36 166阅读 0赞

1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4   <head>
     5     <meta charset="utf-8">
     6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     7     <title>Document</title>
     8   <style>
     9     [v-cloak]{
         
    10       display: none;
    11     }
    12   </style>
    13    
    14   </head>
    15 
    16   <body>
    17       <div id="app">
    18      
    19       <p v-cloak>{
        {msg}}</p>
    20       <h4 v-text="msg"></h4>
    21      
    22     
    23         <div>{
        {msg2}}</div>
    24         <div v-text="msg2"></div>
    25         <div v-html="msg2"></div>
    26         
    27         
    28         
    29         
    30         <input type="button" value="按钮" :title="mytitle+'123' ">
    31       </div>
    32 
    33   <script src="./lib/vue-2.6.10.js"></script>
    34 
    35       <script>          
    36           var vm =  new Vue({
    37               el:'#app',
    38         data:{
    39           msg:'123',
    40           msg2:'<h1>哈哈，我是h1</h1>',
    41           mytitle:'这是一个自己定义的title'
    42         }
    43           })
    44       </script>
    45   </body>
    46 </html>

转载于:https://www.cnblogs.com/songsongblue/p/10986730.html