vue.js關於動態繫結資料
最近在寫vue的時候發現一個問題。
在後臺傳過來的一個數組需要給頁面進行渲染。
需要為每個<li>標籤吧繫結一個點選事件,這個點選事件需要取這個<li>標籤的name屬性的值,然後再進行頁面的跳轉,如何給name賦值呢,剛開始如上圖寫的,{{template.voteId}},發現是錯誤的,{{}}是用在文字插值的,繫結屬性不能這麼寫,需要使用v-bind命令
這樣審查元素後發現已經能夠正常綁定了,li標籤的name屬性也被賦值了。點選事件也綁好了
但在獲取name的值時無法獲取到
this物件未定義,後來發現這個方法是定義在vue中的,vue裡面獲取當前點選事件的物件不是this,而應該用傳入$event,在方法裡用event.currentTarget獲取當前物件;
但根據當前物件使用.name獲取值發現無法取到。。name=undefined,很奇怪,有待研究
最後通過這樣處理解決
li裡面多加了一個div,把值賦給了div,通過li拿到div的值
相關推薦
Vue.js動態繫結class Vue.js 動態繫結class
轉發自部落格園—柳絮憑風的文章:《Vue.js 動態繫結class》,多多支援原創作者,我只是個搬運工。 Vue.js 的核心是一個響應的資料繫結系統,它允許我們在普通 HTML 模板中使用特殊的語法將 DOM “繫結”到底層資料。被繫結的DOM 將與資料保持同步,每當資料有改動,相應的DOM檢視也會更新。
vue.js 動態繫結class的幾種方式
Vue.js 的核心是一個響應的資料繫結系統,它允許我們在普通 HTML 模板中使用特殊的語法將 DOM “繫結”到底層資料。被繫結的DOM 將與資料保持同步,每當資料有改動,相應的DOM檢視也會更新。基於這種特性,通過vue.js動態繫結class就變得非常簡單。 思路:以某一頁面樣式需要單獨
Vue.js 動態繫結CSS樣式
第一種方法: v-bind:class="{a:b,c:b}" a c 代表CSS樣式表裡相應的樣式名 b 代表true(啟用此樣式)/false(不啟用此樣式) html <!--vue-app是根容器--> &l
轉載-vue.js動態繫結class
資料繫結 vue指令以 v- 字首標標,資料繫結的指令 v-bind:屬性名,簡寫為 :屬性名,簡單的資料繫結例子如下: <a v-bind:href="http://www.cnblogs.com/">京津冀</a> 簡寫: &l
vue.js關於動態繫結資料
最近在寫vue的時候發現一個問題。在後臺傳過來的一個數組需要給頁面進行渲染。需要為每個<li>標籤吧繫結一個點選事件,這個點選事件需要取這個<li>標籤的name屬性的值,然後再進行頁面的跳轉,如何給name賦值呢,剛開始如上圖寫的,{{templat
Vue中動態繫結img的src屬性
問題:不同的status值,載入不同的圖片,如下程式碼雖然動態綁定了src,但是並不能成功載入圖片 <div> <img :src="imgUrl"/> <p>{{info}}</p> </div> computed:
HighChat動態繫結資料 資料後臺繫結(四)
後臺繫結資料,直接返回json資料 IList<SummaryHour> adHourData = summarybll.FindList(str); List<int> Hour = new List<int>() { 0, 1,
Vue.js單向繫結和雙向繫結例項
1、單向繫結 單向資料繫結的實現思路: ① 所有資料只有一份 ② 一旦資料變化,就去更新頁面(只有data–>DOM,沒有DOM–>data) ③ 若使用者在頁面上做了更新,就手動收集(雙向繫結是自動收集),合併到原有的資料中。 <!DOCTYPE html&
JQuery Ajax實現Select多級關聯動態繫結資料
關於JQuery選擇外掛的使用在這裡有些心得和大家分享一下,希望能幫到大家。 jQuery選擇外掛分為基本版和美化版,重點說下美化版,如下圖所示: 相比最原始的版本,美化後的選擇外掛可以說是很漂亮了且功
vue接收介面繫結資料
data資料設定return值 form設定具體欄位名 data() { return { page: { currPage: 1, list: [],
強大的JS方法Object.defineProperty詳解及VUE.JS雙向繫結原理
Object.defineProperty是一個很了不起的方法。vue.js之所以能夠實現雙向繫結便是拜它所賜!defineProperty直接翻譯過來即是“定義屬性”,不過該方法可不僅僅是定義屬性這麼簡單,咱們還可以通過它來對屬性進行攔截設定! 我們知道物
Vue.js樣式繫結
樣式繫結 class和style時html元素的屬性,可以使用v-bind來進行樣式的yi繫結,以設定樣式。 v-bind在繫結class和style時,Vue專門增強了它。結果型別不僅可以時字串,還可以是物件和陣列。 class屬性繫結 1:基本使用: <s
vue 通過動態繫結class,改變樣式
根據輸入框或者下拉選擇框有沒有值,改變按鈕可不可用,及按鈕顏色 <el-select v-model="selectData.id" placeholder="請選擇"> <el-option label="請選擇" value=""><
vue 樣式動態繫結
控制元件加上style屬性 :style=”{width:classes(Use_Item.UseText)}” new Vue({ el: elname, data: { }, methods: { classes: function (textname) { if
vue中動態繫結圖片
當img標籤裡的圖片地址是動態變化時,如果圖片不是從後臺獲取,是在assest檔案裡時,要現在data裡初始化其值用require的方式,具體如下:data () { return { // 導航列表 first
vue中動態繫結表單元素的屬性
在vue中有時候可能想像使用jq一樣給某個元素新增屬性,如 $('#select1').attr('disabled','disabled') 這種方法也能實現,但是在vue中能用vue的方法還是儘量不要使用jq 使用vue的方法來新增屬性可以這樣:
Easyui combobox下拉框動態繫結資料
easyui-combobox根據資料庫查詢繫結資料,如下: 1、html <select id="st_cmpy" editable="false" class="easyui-comb
js動態繫結dropdownList 部分程式碼
(function ($) { $.fn.Schoolselected = function(settings, extraSettings) { var options; options = { NextSe
echart折線圖 柱形圖 資料格式化 動態繫結資料 frame處理
var myChart; var eCharts; require.config({ paths : { 'echarts' : '${pageContext.reques
vue中動態繫結背景圖, 圖片水平垂直居中
vue中動態繫結背景圖,並且使寬高不等的圖片水平垂直居中 外層父元素固定寬高,讓圖片垂直居中的方法 <div style="width:200px;height:200px;"> <div :style="{backgroundImage: 'url(' + it