スリ飯屋MaLankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

【Vue.js Nuxt.js】v-bindでhref属性に文字列とコンポーネントのプロパティを指定する

【Vue.js Nuxt.js】v-bindでhref属性に文字列とコンポーネントのプロパティを指定する




今すぐ案件紹介をご希望の方へ


このブログから登録の多いエージェントは下記の3つです★

(リンクをクリックすると公式サイトに飛びます)

【ダントツの1番人気】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】

【僅差で2位】エミリーエンジニア【4人に1人が初めてのフリーランス】

【惜しくも3位】レバテックフリーランス【業界最大手。素早く手厚いフォローで案件参画】




こんにちは、mahです。


このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。


今回は、


  • 【Vue.js Nuxt.js】v-bindでhref属性に文字列とコンポーネントのプロパティを指定する


について書いていきます。




【Vue.js Nuxt.js】v-bindでhref属性に文字列とコンポーネントのプロパティを指定する



v-bindの記法は下記になります。


// 基本形
v-bind:属性名="プロパティ名"

// v-bindは省略可能
:属性名="プロパティ名"


v1-jp.vuejs.org


例. taskコンポーネントが、nameというプロパティを持つ場合


<a v-bind:href="task.name">Name</a>


これで task.name をhref属性に指定したリンクが生成されます。




素の文字列とコンポーネントのプロパティを連結する場合


シングルクォートで囲った文字列 + プロパティ

のようにすればOKです。


  • tasks/1/edit というpathにしたい場合
// idプロパティの値が「1」であるとする
// 通常の文字列はシングルクォートで囲う必要がある

<a v-bind:href="'tasks/' + task.id + '/edit'">編集</a>




Vue.jsやフロントエンドを学習したい方へ


自分の場合、

React.jsVue.jsTypeScriptはUdemyの下記コースで学習しました。


フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

Vue.js + Firebaseで作るシングルページアプリケーション

ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門


f:id:mah666hhh:20200815162919p:plain


f:id:mah666hhh:20200815162939p:plain


f:id:mah666hhh:20200815162951p:plain




最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★





あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech