7。 V-bind 繫結

阿新 • • 發佈：2021-06-25

v-bind介紹

之前學習Mustache表示式一般用在標籤體中，然而有有些標籤的內容是響應式的，就無法用Mustache來解析，例如：

ima 和 a標籤：

<script src="js/vue.js"></script>
    <div id="app">
        <a href="{{baidu}}">百度一下</a>
        <img src="{{imgUrl}}">
    </div>
<script>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　此程式碼是錯誤程式碼××× 

    const app = new Vue({
        el:"#app",
        data:{
            baidu:"https://www.baidu.com/",
            imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
        }
    })
</script>

所以這個程式碼是完全錯誤的在標籤屬性中是解析不了的若我們想讓他可以實現解析【繫結】，也讓標籤屬性實現動態化：

那麼就用v-bind指令：

作用：動態繫結屬性

縮寫：:

預期：any (with argument) | Object (without argument)

引數：attrOrProp (optional)

即：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
<!--  v-bind:  -->
    <a  
v-bind:href="baidu">百度一下</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            baidu:"https://www.baidu.com/",
            imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
        }
    })
</script>

</body>
</html>

所以就成功了，還有簡寫 “：” 例如

<div id="app">
<!--  v-bind: 簡寫就是 : 冒號即可 -->
    <a :href="baidu">百度一下</a>
    <img :src="imgUrl">
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            baidu:"https://www.baidu.com/",
            imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
        }
    })
</script>

總結：

很方便的一個繫結但是呢注意後面跟的資料不是 {{}} ，而是Vue的data中的鍵.

7。 V-bind 繫結

v-bind介紹之前學習Mustache表示式一般用在標籤體中，然而有有些標籤的內容是響應式的，就無法用Mustache來解析，例如：

7. v-bind 繫結Class操作【物件語法】

因為v-bind可以直接實現標籤屬性的值動態化，那麼Class作為一個屬性，那麼：

7. v-bind 繫結Class操作【陣列語法】

這種寫法用的比較少因為...沒必要多此一舉了　　【瞭解即可】 <h2 :class=\"[\'active\',\'aabb\']\">Hello World</h2>

詳解vue中v-model和v-bind繫結資料的異同

vue的模板採用DOM模板，也就是說它的模板可以當做DOM節點執行，在瀏覽器下不報錯，繫結資料有三種方式，一種是插值，也就是{{name}}的形式，一種是v-bind，還有一種是v-model。{{name}}的形式比較好理解，就是以文字

Vue內建指令之v-bind繫結class的介紹與舉例

技術標籤：HTMLvuevuehtml v-bind主要用於解決HTML元素屬性值的繫結問題，用於響應更新HTML元素的屬性，將一個或多個屬性或一個元件的prop動態繫結到表示式。 v-bind繫結class，繫結方式：物件語法，含義class後

Vue中Class和Style實現v-bind繫結的幾種用法

專案開發中給元素新增/刪除 class 是非常常見的行為之一，例如網站導航都會給選中項新增一個 active 類用來區別選與未選中的樣式，除了導航之外其他很多地方也都會用到這種方式處理選中與未選中。

8. Vue - v-bind 繫結 Style 【物件語法和陣列語法】

之前說過 v-bind 這東西可以綁class 那麼必然也可以繫結實style 了，而且也有物件語法和陣列語法：

VUE table表格動態新增一列資料,新增的這些資料不可以編輯（v-model繫結的資料不能實時更新）

一、問題用elementUi橫著增加一行資料沒毛病，可以操作新增一列，這新增的這一列，第一次去賦值的時候值是改了，但沒生效

【React思考錄】為什麼React Class Component需要bind繫結事件?

最近在使用React+Typescript重構一個應用，後面看到同事在寫react元件的方法時，是採用箭頭函式的寫法。這讓我想起在 React Class Component 繫結事件時，經常會通過 bind(this) 來繫結事件，比如：

C++中使用function和bind繫結類成員函式的方法詳解

定義一個普通的類 class Test1{ public: void fun(int val){ cout<<\"hello world \"<<val<<endl;

vue自定義指令+只能輸入數字和英文+修改v-model繫結的值

//Alphabet.js import Vue from \'vue\'; Vue.directive(\'Alphabet\', { //自定義指令只能輸入英文數字

vue指令 v-html 繫結html程式碼

技術標籤：# vuev-html 更新元素的 innerHTML。注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。

vue中使用v-on繫結一個方法的引數傳遞問題

技術標籤：vuevuejavascript前端當通過 methods 中定義方法，以供@click呼叫時，需要注意引數問題：

VUE--元件間v-model繫結

技術標籤：VUEvue 1、自定義指令 // 父元件-html <template> <div> <my-son v-my-model="parentValue"></my-son>

v-model繫結動態欄位

這邊子元件使用多次如何將這些值搞到一起不能讓我一個個寫變數吧； <el-form v-for=\"(item,index) in formList\" :key=\"index\">

v-on繫結事件時，函式名加括號和不加括號的區別

1 <div id=\"event-with-method\"> 2 3<button v-on:click=\"greet\">Greet</button>

v-model 繫結物件不實時更新原因和解決方案

今天遇到這樣一個問題動態的向一個被繫結的物件中新增屬性。Vue 無法檢測 property 的新增或移除。由於 Vue 會在初始化例項時對 property 執行 getter/setter 轉化，所以 property 必須在data 物件上存在才能讓 Vue

VUE3 之多個 v-model 繫結及 v-model 修飾符的使用 - 這個系列的教程通俗易懂，適合新手

1. 概述洛克定律告訴我們：當我們的目標很遠大，遠到我們都看不到終點時，放棄機率就會很大，就像跑馬拉松比賽，由於時間長、距離長，很多選手都會選擇在中途放棄。

3.C++11中引入的bind繫結器和function函式物件

繫結器bind1st，bind2nd vector<int> vec; for(int i=0;i<20;i++){ vec.push_back(rand()%100); } showContainer(vec);

Vuejs學習筆記(一)-7.html的屬性動態繫結操作v-bind

前面學了vue的插值操作，基本是對html標籤內部展示的內容的展示。此處學習v-bind是對標籤屬性的動態繫結操作。

7。 V-bind 繫結

相關推薦