Vue常用的幾個指令

2021-09-19 21:39:27 字數 969 閱讀 1660

越來越多的人在用vue,剛開始接觸vue的話常接觸的指令就幾個,統一歸納一下,做個demo演示。

學習技術最好還是要看下**是什麼樣的。

v-text

解釋:更新dom物件的 textcontent

v-html

解釋:更新dom物件的 innerhtml

v-bind

作用:當表示式的值改變時,將其產生的連帶影響,響應式地作用於 dom

語法:

v-bind:title="msg"

// 簡寫::title="msg"

v-on

作用:繫結事件

語法:v-on:click="say" or v-on:click="say('引數', $event)"

簡寫:@click="say"

說明:繫結的事件定義在methods

v-model

作用:在表單元素上建立雙向資料繫結

說明:監聽使用者的輸入事件以更新資料

案例:計算器

message is: }

v-for

作用:基於源資料多次渲染元素或模板塊

}

} -- }

} -- }

完整案例
}v-model資料:

按鈕} -- }

note:**是在腳手架的專案中寫的。

效果如下:

vue常用指令

1 v model id box type text v model br div var a new vue script 就和 ng model 乙個意思了 v html html v html html渲染過程中被解析 v text text 同上 意思就是資料渲染過程中被解析 v for v...

vue常用指令

常用內建指令 v text 更新元素的 textcontent v html 更新元素的 innerhtml v if 如果為true,當前標籤才會輸出到頁面 v else 如果為false,當前標籤才會輸出到頁面 v show 通過控制display樣式來控制顯示 隱藏 v for 遍歷陣列 物件...

vue常用指令

vue常用指令 1.v text v text主要用來更新textcontent,可以等同於js的text屬性 2.v html 雙大括號的方式會將資料解釋為純文字,而非html。為了輸出真正的html,可以用v html指令。它等同於js的innerhtml屬性。3.v pre v pre主要用來...