Article Directory
v-if
This is the conditional rendering statement, as always, directly on the code:
<body>
<!--引入vue.js库-->
<script src="../third_party_pack/vue/vue.js"></script>
<div id="sagasw">
<input type="text" v-model="items">
<p v-if="items>10">目前还有商品:{{items}}</p>
<p v-else-if="items >=1 && items<=10 ">目前只有商品:{{items}}</p>
<p v-else-if="items==0">目前没有商品:{{items}}</p>
<button @click="itemsAdd">不管了，买！</button>
</div>
<script>
new Vue({
el: '#sagasw',
data: {
items: 0,
},
methods: {
itemsAdd: function () {
this.items++;
}
}
})
</script>
</body>
This is a tricky event. After clicking to buy and judge by the code, the number of goods will gradually increase >>>
goods at 0:
When the product is between 1-10:
When the product is greater than 10:
Overall process:
v-if's real kill element
After directly negating v-if as false, the element will completely disappear from the page
V-show is temporarily hidden
v-if: I like to again resolve to eradicate the root element directly from the page
v-show: I will not get rid of elements directly, that is too violent direct, and I are hidden
v-for array traversal rendering
<body>
<script src="../third_party_pack/vue/vue.js"></script>
<div id="sagasw">
<div v-for="color in datas" style="width: 60px;height:60px;" :style="{backgroundColor:color}">{{color}}</div>
</div>
<script>
new Vue({
el: '#sagasw',
data: {
color: '',
datas: ['red', 'green', 'blue']
},
})
</script>
</body>
The index of each item in the circular array and the circular array
Use i for array index
<body>
<script src="../third_party_pack/vue/vue.js"></script>
<div id="sagasw">
<div
v-for="(items,i) in datas"
style="width: 260px;height:260px;"
:style="{backgroundColor:items.color}">
{items.color}
<h3>评价：{{items.praise}}|{{i}}</h3>
</div>
</div>
<script>
new Vue({
el: '#sagasw',
data: {
items: 0,
datas: [{ color: 'red', praise: 'good' }, { color: 'green', praise: 'well' }, { color: 'blue', praise: 'better' }]
},
})
</script>
</body>
Use prop to render the property name, use index to render the index
Loop an object with v-for
value | prop | index
<body>
<script src="../third_party_pack/vue/vue.js"></script>
<div id="sagasw">
<div v-for="(value,prop,index) in datas" style="width: 260px;height:260px;">
<h3>评价：{{value}}|属性名:{{prop}}| 索引:{{index}}</h3>
</div>
</div>
<script>
new Vue({
el: '#sagasw',
data: {
items: 0,
datas: { color: 'red', praise: 'good' }
},
})
</script>
</body>
Loop a number and string with v-for
About the problem that the array data has not changed when rendering! ! !
For example this:
<body>
<script src="../third_party_pack/vue/vue.js"></script>
<div id="sagasw">
<div v-for="(num,i) in datas" @click="clickIt(i)" style="width: 20px;height:60px;">
<h3>{{num.message}}</h3>
</div>
</div>
<script>
new Vue({
el: '#sagasw',
data:{
datas:[{message:'热情'},{message:'态度'}],
},
methods:{
clickIt:function(index){
this.datas[index]={message:"我改变了，欧耶！"};
console.log(this.datas);
}
}
})
</script>
</body>
How do we solve it? ? ? (solution)
Solution 1:
This is what we need to keep in mind, then use the concat () method for data replication.
See code >>>
<body>
<script src="../third_party_pack/vue/vue.js"></script>
<div id="sagasw">
<div v-for="(num,i) in datas" @click="clickIt(i)" style="width: 20px;height:60px;">
<h3>{{num.message}}</h3>
</div>
</div>
<script>
new Vue({
el: '#sagasw',
data: {
datas: [{ message: '热情' }, { message: '态度' }],
},
methods: {
clickIt: function (index) {
let arr = this.datas.concat();
arr[index] = {
message: "我改变了，欧耶！",
}
this.datas = arr;
}
}
})
</script>
</body>
Method 2: The
push () method can directly add data into it.
See the code >>>
<body>
<script src="../third_party_pack/vue/vue.js"></script>
<div id="sagasw">
<div v-for="(num,i) in datas" @click="clickIt(i)" style="width: 20px;height:60px;">
<h3>{{num.message}}</h3>
</div>
</div>
<script>
new Vue({
el: '#sagasw',
data: {
datas: [{ message: '热情' }, { message: '态度' }],
},
methods: {
clickIt: function (index) {
this.datas.push({
message:'我加入了，欧...也！'
})
}
}
})
</script>
</body>
Array data is reversed for the same reason
revers ()
