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之---v-bind指令

Vue.js前端框架系统学习——Vue指令之v-for, v-on, v-bind, v-model

vue-language-server :迭代中的元素期望有 'v-bind:key' 指令

vue模板语法: 插值语法和指令语法以及v-bind指令使用

vue模板语法: 插值语法和指令语法以及v-bind指令使用

Vue指令:v-bind动态属性绑定