- Vue.js 2.x by Example
- Mike Street
- 110字
- 2021-07-02 20:00:26
Creating links using v-html
The next step is to link the email address so that it is clickable for users viewing the list of people. In this instance, we need to concatenate strings by adding a mailto: before the email address.
The first instinct is to do the following:
<a href="mailto:{{person.email}}">{{ person.email }}</a>
But Vue doesn't allow interpolation inside attributes. Instead, we must use the v-bind directive on the href attribute. This turns the attribute into a JavaScript variable, so any raw text must be written in quotes, and the concatenated with the desired variable:
<a v-bind:href="'mailto:' + person.email">{{ person.email }}</a>
Note the addition of v-bind:, the single quotes and concatenation + identifier.
推薦閱讀
- 程序設(shè)計(jì)與實(shí)踐(VB.NET)
- 劍指Offer(專項(xiàng)突破版):數(shù)據(jù)結(jié)構(gòu)與算法名企面試題精講
- Mastering LibGDX Game Development
- Building Minecraft Server Modifications
- 用戶體驗(yàn)增長(zhǎng):數(shù)字化·智能化·綠色化
- MATLAB 2020從入門到精通
- BeagleBone Black Cookbook
- 詳解MATLAB圖形繪制技術(shù)
- 從Power BI到Analysis Services:企業(yè)級(jí)數(shù)據(jù)分析實(shí)戰(zhàn)
- 零基礎(chǔ)學(xué)C語(yǔ)言(第4版)
- 30天學(xué)通C#項(xiàng)目案例開發(fā)
- Instant Apache Camel Messaging System
- HTML5游戲開發(fā)實(shí)戰(zhàn)
- Java高級(jí)程序設(shè)計(jì)
- 數(shù)字媒體技術(shù)概論