指令是以資料去驅動dom行為，簡化dom操作。常用指令如下
demo v-text、v-html、v-show
<div
id="div1"
>
div>
<
div
id="div2"
>
div>
<
div
id="div3"
>
div>
<
script
>
newvue(}
'data:
function
() }
});newvue(
}});
newvue(
}});
script
>
demo v-if系列 條件判斷
<div
id>
<
p v-if
="score>80"
>優秀
p>
<
p v-else-if
="score>60"
>及格
p>
<
p v-else
>不及格
p>
div>
<
script
>
newvue(
}});
script
>
滿足條件才顯示對於的元素。
new vue()中，template、data均可選。
所謂template 模板，就是內容的模板，內容（包括指令）可以寫在元素裡、也可以寫在template裡
<div
id>姓名：}
div>
<
div
id>
div>
<
script
>
newvue(
}});
newvue(}
',
//寫在template裡
data:
function
() }
});script
>
效果是一樣的。
return 返回的是乙個物件。
data的2種寫法
data:function()},data()
},
效果都是一樣的。
demo v-for 遍歷陣列、物件
<ul id
>
<
li v-for
="(item,index) in array"
>第}項：}
li>
ul>
<
ul id
>
<
li v-for
="(key,value) in object"
>}：}
li>
ul>
<
script
>
newvue(
}});
newvue(
//物件
} }
});script
>
demo v-bind、v-model 單雙向資料繫結
<div
id>
div>
<
div
id>
div>
<
script
>
newvue(}
',
data:
function
() }
});newvue(}',
data:
function
() }
});script
>
可以 v-bind|model:value="變數名" 來繫結，也可以 v-bind|model="變數名" 來繫結，相比而言，後者更簡單。
v-bind|model與繫結時，是與的value繫結。
demo v-on 事件繫結
<div
id>
div>
<
div
id>
div>
<
script
>
newvue(}
',
data:
function
() }
});newvue(}
',
data:
function
() },
methods:
//可以寫多個方法，逗號分隔
} });
script
>
template中可以寫很多內容
<div
id>
div>
<
script
>
newvue(
}});
script
>
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主要用來...