提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)

JSVue属性教程 设置 系列 方式 绑定
2023-09-11 14:19:51 时间

一、设置属性的值: {{data中的数据}}

1         window.onload = function () {
2             var c = new Vue({
3                 el : '#box',
4                 data : {
5                     url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
6                 }
7             });
8         }
1     <div id="box">
2         <img src="{{url}}" alt=""/>
3     </div>

二、v-bind绑定属性的值

 1         window.onload = function () {
 2             var c = new Vue({
 3                 el : '#box',
 4                 data : {
 5                     url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
 6                 }
 7             });
 8         }
 9 
10 
11    
12     <div id="box">
13         <img v-bind:src="url" alt=""/>
14     </div>

三、简写方式，冒号 (:) 绑定

1         window.onload = function () {
2             var c = new Vue({
3                 el : '#box',
4                 data : {
5                     url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
6                 }
7             });
8         }
1     <div id="box">
2         <img :src="url" alt=""/>
3     </div>

四、绑定多个属性

 1         window.onload = function () {
 2             var c = new Vue({
 3                 el : '#box',
 4                 data : {
 5                     url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg',
 6                     w : '400px',
 7                     t : '这是一张百度图片'
 8                 }
 9             });
10         }
11 
12 
13     <div id="box">
14         <img :src="url" :width="w" :title="t" alt=""/>
15     </div>

 

相关文章