vue之---v-bind指令
Posted yuanxiangguang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue之---v-bind指令相关的知识,希望对你有一定的参考价值。
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>
以上是关于vue之---v-bind指令的主要内容,如果未能解决你的问题,请参考以下文章
Vue.js前端框架系统学习——Vue指令之v-for, v-on, v-bind, v-model
vue-language-server :迭代中的元素期望有 'v-bind:key' 指令
vue模板语法: 插值语法和指令语法以及v-bind指令使用