vue綁定設置屬性的多種方式(5)

更新時間：2017年08月16日 08:37:29 作者：ghostwu

這篇文章主要為大家詳細介紹了vue綁定設置屬性的多種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue系列教程第五篇，即綁定設置屬性的多種方式，具體內(nèi)容如下

一、設置屬性的值: {{data中的數(shù)據(jù)}}

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
  }
  });
 }

<div id="box">
  <img src="{{url}}" alt=""/>
</div>

二、v-bind綁定屬性的值

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
  }
  });
 }
 
<div id="box">
 <img v-bind:src="url" alt=""/>
</div>

三、簡寫方式，冒號 (:) 綁定

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg'
  }
  });
 }

<div id="box">
 <img :src="url" alt=""/>
 </div>

四、綁定多個屬性

window.onload = function () {
  var c = new Vue({
  el : '#box',
  data : {
   url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg',
   w : '400px',
   t : '這是一張百度圖片'
  }
  });
 }

<div id="box">
 <img :src="url" :width="w" :title="t" alt=""/>
</div>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
屬性

Vue封裝遠程下拉框組件的實現(xiàn)示例
本文主要介紹了Vue封裝遠程下拉框組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
Vue嵌套路由的各種用法詳解
在 Vue 中,嵌套路由和 Element Plus 的 Menu 組件是構建復雜單頁面應用（SPA）時的常用組合,通過嵌套路由,可以實現(xiàn)多級頁面結構,以下是結合 Vue 嵌套路由和 Element Plus Menu 的各種用法和場景的詳細介紹,需要的朋友可以參考下
2025-01-01
如何為Vue3提供一個可媲美Angular的ioc容器
ue3因其出色的響應式系統(tǒng),以及便利的功能特性,完全勝任大型業(yè)務系統(tǒng)的開發(fā),這篇文章主要介紹了如何為Vue3提供一個可媲美Angular的ioc容器,需要的朋友可以參考下
2024-08-08
vue項目打包后proxyTable代理失效問題及解決
這篇文章主要介紹了vue項目打包后proxyTable代理失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。
2023-05-05
vue3 表單搜索內(nèi)容回顯到地址欄的實例代碼
這篇文章主要介紹了vue3 表單搜索內(nèi)容回顯到地址欄的實例代碼,地址欄輸入內(nèi)容回顯到form表單,同理表單輸入內(nèi)容也要回顯到地址欄中,本文結合實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-09-09
vue中使用svg-icon遇到的坑及解決
這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue中import from的來源及省略后綴與加載文件夾問題
這篇文章主要介紹了Vue中import from的來源--省略后綴與加載文件夾,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-02-02
Vuex的初探與實戰(zhàn)小結
這篇文章主要介紹了Vuex的初探與實戰(zhàn)小結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
vue登錄頁實現(xiàn)使用cookie記住7天密碼功能的方法
這篇文章主要介紹了vue登錄頁實現(xiàn)使用cookie記住7天密碼功能的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
如何利用Vue3管理系統(tǒng)實現(xiàn)動態(tài)路由和動態(tài)側邊菜單欄
通常我們在vue項目中都是前端配置好路由的,但在一些項目中我們可能會遇到權限控制,這樣我們就涉及到動態(tài)路由的設置了,下面這篇文章主要給大家介紹了關于如何利用Vue3管理系統(tǒng)實現(xiàn)動態(tài)路由和動態(tài)側邊菜單欄的相關資料,需要的朋友可以參考下
2022-02-02