1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>vue指令v-cloak</title> 7 </head> 8 <style> 9 10 [v-cloak]{ 11 display: none; 12 } 13 14 </style> 15 16 <body> 17 <!-- v-cloak解决插值闪烁问题 --> 18 <div id="app"> 19 <p v-cloak>{{msg}}</p> 20 <p v-text="msg"></p> 21 <!-- v-html转化代码 --> 22 <p v-html="msg1"></p> 23 <!-- v:bind--绑定属性值 v-bind可以简写: 变量名可以添加属性--> 24 <!-- <input type="button" value="按钮" v-bind:title="mytitle +'1234'"> --> 25 <input type="button" value="按钮" :title="mytitle +'1234'"> 26 </div> 27 28 <script src="../js/vue.js"></script> 29 <script> 30 var vm = new Vue({ 31 el: "#app", 32 data: { 33 msg: '我是一只小猫', 34 msg1:'<h2>我是一只小猫</h2>', 35 mytitle:"我是标题" 36 } 37 }) 38 </script> 39 </body> 40 </html>