Vue基本命令v-for,v-show/if,v-else/else-if,v-bind,v-onおよび総合業務
39299 ワード
mutache文法糖基礎テンプレート構文 v-for v-for 配列v-for="(item,index)in arr"itemはarrの各要素 であるオブジェクトv-for="(item,key,index)in obj"itemはobjの属性値 である jsonタイプデータ ネスト型データ key:ループのないリストに一意の識別子を追加 命令v-bindを使用してkey
div>
!!! id， id， ， index
v-bind: ： dom
div>
// for( var i = 0 ; i < 100; i ++ ){}
// for( var i in arr ){}
// for ( var i of arr ) {}
をバインドする
v-showとv-ifの い :(dom にバインドされている) v-showはdomの を することができる(この はdomのdisplay を する) v-ifはdomの を することができる( および ) ( )【ダイヤモンド】 v-if vs v-show ユーティリティ:プロジェクトでこの2つの を v-if はdom (コンポーネント)の または である. v-show はdom のdisplay である. v-ifは、 、 、 の な を することができる. v-showは1つの しか けません
まとめ: に、v-ifはより いスイッチングオーバーヘッドを し、v-showはより い レンダリングオーバーヘッドを する.したがって、 に に り える がある は、v-showを いるのが ましい. に が されない は、v-ifを するとよい.
v-else/v-else-if v-ifと しなければならない で できない 、エラーテンプレートコンパイルエラー <div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show">div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if="">div>
<div style="width: 300px;height: 300px;background: blue" v-else="">div>
div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
script>
v-html/v-text v-html htmlタグ<div id="box">
<div v-html="msg">div>
div>
<script>
new Vue({
el: "#box",
data(){
return {
msg:"121212"
}
},
methods: {
say() {
}
}
})
script>
v-text テキスト(v-text み りテキストhtmlラベルが めない) 1 <div id="box">
2 <div v-text="msg">div>
3 div>
4
5 <script>
6 new Vue({
7 el: "#box",
8 data(){
9 return {
10 msg:"11111"
11 }
12 },
13 methods: {
14 say() {
15 alert(111);
16 }
17 }
18 })
19 script>
v-bind: classクラス バインドとstyle vueでdomにクラス を する domにクラス をバインド vueのクラス バインド-オブジェクト :domのプロパティclassとデータバインド :v-bindデータのkey、 たちはバインドされたオブジェクトのkeyと じですが、この2つのものが なることを っておく があります p>
size ， undefined， false
p>
size ， true,
p>
： v-bind:class = "{ ( true) }"
： v-bind:class = "{ ： boolean }"
： v-bind:class = "{ [data]： boolean }"
new Vue({
el: '#app',
data: {
msg: 'hello Vue.js',
s: 'size',
bg_color: 'bg_color',
flag: true
}
})
vueでクラス がバインドされた - の 【 】 :v-bind:class=「[データ]」 p>
p>
p>
p>
クラス バインドは、 のクラス を きしません.クラス をバインドする はdomを する である: データによってクラス を するために、クラス dom styleスタイルのバインドv-bind:style="" オブジェクトの p>
の p>
p>
v-on:コマンドeventイベントバインド
Vueイベントの き し: :javascriptイベントにいくつかの が されました イベントバインド( イベント)dom.onclick=function(){}dom:イベントソースon:イベントをバインドする click:イベントタイプfunction(){}イベント イベントリスニング(イベントバインディング ):dom.addEventListener(‘click’,function(){},false)addEventListener( オブジェクトバインディングで のイベントが きされない!)false:バブル (デフォルト)trueを す:キャプチャ を す ラベルにイベントをバインドする div>
vue ， dom div>
Vue :
div>
-
-
- click
- handerName
-
-
- v-on: — > @
- ： ？
()
: の に、イベントオブジェクトを す のパラメータ$eventが されます.イベントオブジェクトも に でき、イベントハンドラではeを くと になります. :イベントハンドラに3つのパラメータがある 、3 のパラメータこそイベントオブジェクトe, である. の :イベントハンドラの3 のパラメータeはイベントオブジェクトではなくundefined であることが かった.
:このボタンをクリックして、 しいデータを してリストデータに く : きは を できませんが、 が されたのを ました. :length=0で を にすると、vueはこの を できません.splice を します. : の のデータを すると、 きスケールで を できない が つかりました.Vue.set/this.$set を します. <style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
border: 1px solid #000;
height: 50px;
position: relative;
}
ul li input {
width: 99%;
height: 96%
}
.remove {
position: absolute;
right: 5px;
top: 15px;
}
.change {
position: absolute;
right: 50px;
top: 15px;
}
#app {
width: 500px;
}
style>
<div id="app">
<ul>
<li v-show="addflag">
<input type="text" v-model="tempdata">
li>
<li v-for="(list,index) in lists" :key="list.id">
{
{list.task}}
<button @click="remove(index)" class="remove"> button>
li>
ul>
<button @click="addflag=!addflag" class="add"> button>
<button @click="add"> button>
<button @click="change"> button>
div>
new Vue({
el: '#app',
data: {
addflag: false,
lists: [
{
id: 1,
task: ' '
},
{
id: 2,
task: ' '
}
],
tempdata: '',
},
methods: {
add() {
this.lists.push({
id: this.lists.length + 1,
task: this.tempdata
});
this.tempdata = '';
this.addflag = !this.addflag;
},
remove(index) {
this.lists.splice(index, 1)
},
change() {
Vue.set(this.lists,'1',{
id:2,
task:" "
})
}
}
})
があるかもしれません