快捷導(dǎo)航

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

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

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

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

一、設(shè)置屬性的值: {{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>

三、簡(jiǎn)寫方式，冒號(hào) (:) 綁定

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>

四、綁定多個(gè)屬性

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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
屬性

相關(guān)文章

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