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

Posted songsongblue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二章 Vue快速入门--8 v-bind指令的学习相关的知识,希望对你有一定的参考价值。

 

 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      <!--  使用v-cloak能够解决插值表达式闪烁的问题 -->
19       <p v-cloak>msg</p>
20       <h4 v-text="msg"></h4>
21      <!--  默认v-text是没有闪烁问题的 -->
22     <!--  v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个 占位符,不会把整个元素内容清空 -->
23         <div>msg2</div>
24         <div v-text="msg2"></div>
25         <div v-html="msg2"></div>
26         <!-- v-bind:是Vue中,提供用于绑定属性的指令 -->
27         <!-- <input type="button" value="按钮" v-bind:title="mytitle+‘123‘ "> -->
28         <!-- 注意:v-bind:  指令可以被简写为:要绑定的属性 -->
29         <!-- v-bind 中,可以写合法的js表达式 -->
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>

 

以上是关于第二章 Vue快速入门--8 v-bind指令的学习的主要内容,如果未能解决你的问题,请参考以下文章

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

Vue快速入门(附实战小项目:记事本天气预报音乐播放器)

Vue 全套教程,入门 Vue 必知必会

B站学习Vue入门笔记

Vue教程v-bind指令动态绑定

Vue.js 入门