微信扫一扫打赏支持

VUE课程参考---5、属性绑定v-bind

VUE课程参考---5、属性绑定v-bind

一、总结

一句话总结：

v-bind是vue中绑定属性的指令，v-bind中可以写合法的js表达式，v-bind: 指令可以被简写为 :要绑定的属性
<div id="app">
<!--    <p title="123">{{msg}}</p>-->
    <!--v-bind是在vue中用于绑定属性的指令-->
    <p v-bind:title="myTitle">{{msg}}</p>
    <!--vue的指令里面都可以写合法的js表达式-->
    <p v-bind:title="myTitle + '：  这是拼接的内容'">{{msg}}</p>
    <!--v-bind: 指令可以被简写为 :要绑定的属性-->
    <p :title="myTitle + '：  这是拼接的内容'">{{msg}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            msg:'让学过的东西不再忘记的 编程视频学习网站：fanrenyi.com',
            myTitle:'这是一个自定义的title'
        }
    });
    //console.log(vm);
</script>

 

 

 

1、属性绑定指令 v-bind: 的简写形式是什么？

v-bind: 指令可以被简写为 :要绑定的属性
<div id="app">
<!--    <p title="123">{{msg}}</p>-->
    <!--v-bind是在vue中用于绑定属性的指令-->
    <p v-bind:title="myTitle">{{msg}}</p>
    <!--vue的指令里面都可以写合法的js表达式-->
    <p v-bind:title="myTitle + '：  这是拼接的内容'">{{msg}}</p>
    <!--v-bind: 指令可以被简写为 :要绑定的属性-->
    <p :title="myTitle + '：  这是拼接的内容'">{{msg}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            msg:'让学过的东西不再忘记的 编程视频学习网站：fanrenyi.com',
            myTitle:'这是一个自定义的title'
        }
    });
    //console.log(vm);
</script>

 

 

 

二、属性绑定v-bind

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性绑定v-bind</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 v-bind
11 作用：v-bind是在vue中用于绑定属性的指令
12 
13 注意：vue的指令里面都可以写合法的js表达式
14 
15 简写：v-bind: 指令可以被简写为 :要绑定的属性
16 
17 
18 -->
19 <div id="app">
20 <!--    <p title="123">{{msg}}</p>-->
21     <!--v-bind是在vue中用于绑定属性的指令-->
22     <p v-bind:title="myTitle">{{msg}}</p>
23     <!--vue的指令里面都可以写合法的js表达式-->
24     <p v-bind:title="myTitle + '：  这是拼接的内容'">{{msg}}</p>
25     <!--v-bind: 指令可以被简写为 :要绑定的属性-->
26     <p :title="myTitle + '：  这是拼接的内容'">{{msg}}</p>
27 </div>
28 <script src="../js/vue.js"></script>
29 <script>
30     let vm=new Vue({
31         el:'#app',
32         data:{
33             msg:'让学过的东西不再忘记的 编程视频学习网站：fanrenyi.com',
34             myTitle:'这是一个自定义的title'
35         }
36     });
37     //console.log(vm);
38 </script>
39 </body>
40 </html>

 

 

 
posted @ 2020-05-05 10:41  范仁义  阅读(237)  评论(0)  编辑  收藏  举报