1. 程式人生 > >初識Vue屬性繫結

初識Vue屬性繫結

HTML 屬性中的值應使用 v-bind 指令。
現在想通過在Vue中繫結a標籤的href屬性中的url

在js:
    new Vue({
               el:"#app",
               data:{
                   webtarget:"https://www.baidu.com/"
               }
           })


在html:
     <div id="app">
            <a v-bind:href="webtarget">百度一下</a>
        </div>

可以通過v-bind 指令來繫結a標籤中的href屬性
在這裡插入圖片描述
通過檢查元素可以看到

使用 v-html 指令用於輸出 html 程式碼:
例如現在想通過在Vue的資料中繫結一個屬性,屬性值為一個a標籤,然後渲染到html中
在html:

<div id="app">
        <a v-bind:href="webtarget">百度一下</a>
        <p v-html = 'newWebtarget'></p>
    </div

在js:

 new Vue({
           el:"#app",
           data:{
              webtarget:"https://www.baidu.com/",
               newWebtarget:'<a href = "https://www.baidu.com/">baidu</a>'
           }

在這裡插入圖片描述