Vue绑定数据的几种方法

Vue绑定数据的几种方式

一、用双大括号 ‘{{}}’ 把数据给到页面
 1 <template>
 2 
 3   <div class="mainBody">
 4       <h3>{{ msg }}</h3>
 5   </div>
 6 </template>
 7 <script>
 8 export default {
 9    data(){
10      return{
11        msg:'月落乌啼霜满天',
12      }
13 }
14 }
15 </script>
16 ————————————————
17 版权声明：本文为CSDN博主「汀途」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
18 原文链接：https://blog.csdn.net/m0_47323674/article/details/121816439

 

 

 

二、使用vue指令
 1 <template>
 2 
 3   <div class="mainBody">
 4        <Input v-model="msg"/>
 5   </div>
 6 </template>
 7 <script>
 8 export default {
 9    data(){
10      return{
11        msg:'月落乌啼霜满天'
12      }
13 }
14 }
15 </script>
16 ————————————————
17 版权声明：本文为CSDN博主「汀途」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
18 原文链接：https://blog.csdn.net/m0_47323674/article/details/121816439

这边使用的是 v-model 将输入框的值与msg绑定 ，还可以是v-text v-html v-bind等

 

 

 

三、标签属性前加 ‘ ：’ 绑定
 1 <template>
 2 
 3   <div class="mainBody">
 4     <CellGroup>
 5       <Cell :title="msg"/>
 6     </CellGroup>
 7 
 8   </div>
 9 </template>
10 <script>
11 export default {
12    data(){
13      return{
14        msg:'月落乌啼霜满天',
15      }
16 }
17 }
18 </script>
19 ————————————————
20 版权声明：本文为CSDN博主「汀途」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
21 原文链接：https://blog.csdn.net/m0_47323674/article/details/121816439

 

 title，如果title属性前面忘记加‘ ：’的话，页面展示就会变成这样：

 

 

给到title的值就不是data（）中的变量 msg 而是字符串“msg”了

四、数据前拼接字符串用`${}`
 1 <template>
 2 <!-- 有时我们需要给要绑定的值拼接字符串，比如需要控制样式，拼接字符串时，那我们就需要这样写`${}`， -->
 3   <div class="mainBody">
 4     <CellGroup>
 5       <Cell :title="msg"/>
 6        <!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:'aqua' -->
 7       <Cell title='江枫渔火对愁眠' :style="`background-color: ${color}`"/>
 8        <!-- 将‘江枫渔火对愁眠’拼接在msg：'月落乌啼霜满天'后-->
 9       <Cell :title="`${msg}，江枫渔火对愁眠`" />
10     </CellGroup>
11 
12   </div>
13 </template>
14 <script>
15 export default {
16    data(){
17      return{
18        msg:'月落乌啼霜满天',
19        color:'aqua'
20      }
21 }
22 }
23 </script>
24 ————————————————
25 版权声明：本文为CSDN博主「汀途」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
26 原文链接：https://blog.csdn.net/m0_47323674/article/details/121816439

 

posted @ 2022-05-08 20:16  Adinsclay  阅读(786)  评论(0)    收藏  举报