全國咨詢(xún)熱線(xiàn)：
15344458925
這篇文章主要介紹了VUE實(shí)現一個(gè)簡(jiǎn)單的基于學(xué)生信息管理系統,本文通過(guò)實(shí)例代碼給大家介紹的非常詳??細，對大家的現簡(jiǎn)學(xué)生信息系統學(xué)習或工作具有一定的參考借鑒價(jià)值，需ヽ(′?｀)ノ要的管理朋友可以參考下
一、主要功能
本次任務(wù)主要是基于使用VUE來(lái)實(shí)現一個(gè)簡(jiǎn)單的學(xué)生信??息管理系統，主要功能為：
1.顯示所有學(xué)生的現簡(jiǎn)學(xué)生信息系統信息（默認為10個(gè))
2. 點(diǎn)擊按鈕，顯示出學(xué)號(???)尾號為單數(或雙數）的管理學(xué)生信息
3. 增加學(xué)生信息
二、實(shí)現思路
2.(′Д` )顯示學(xué)生信息：因為組件是可復用的 Vue 實(shí)例，所以在這里引入子組件（用來(lái)顯示每個(gè)學(xué)(//ω//)生的現簡(jiǎn)學(xué)生信息系統信息），將主頁(yè)作為父組件。管理主頁(yè)（父組件）使用v-f??or 循環(huán)顯示子組件?；??
3.按單雙號篩選查找學(xué)生：循環(huán)遍歷json數組，現簡(jiǎn)學(xué)生信息系統進(jìn)行判斷，管理把符合條件的基于信息放到新的jsヽ(′▽?zhuān)?ノon數組(′?ω?`)。
4.使用 v-if 把符合篩選條件的現簡(jiǎn)學(xué)生信息系統學(xué)生信息顯示在主頁(yè)上。
三、管理代碼實(shí)現
1、父子組件定義
父組件 ：首先要定義要調用的組件
export? default {
name: 'HelloWorld',
components: {
ChildCom//調用組件
},
子組件：
export default {
name: 'Ch??ild',
props: [
'card_item'
],
data () {
return {
}
}
}
2、組件中的通信
組件是通過(guò)Prop向子組件傳遞數據的
通過(guò)：card_item（子組件定義的接受數據的名字） = &ldquo??;stu&rdquo??;（父組件傳給子組件的數據）
<??div v-if="flag_danshu==1">
<Child-com id??="1" class='list' v-for='(stu,index1) in?? new_list_danshu(′?｀*)' :key="index1??"(′?｀) :c??ard_item='stu' >ヽ(′?｀)ノ;
</Cヽ(′ー｀)ノhil??d-com>
</div>
<div?? v-else-if="flag_shuangshu==1">
<Child-com id='2' class="list" v-for='(stu,index2) in new_list_shuangshu' :key="index2" :card_item="stu" >
</Child-com>
</div>
<div v-else-if='flag_all==1'>
<Child-com id="3" class='list' v-for='(stu,index3) in stu_list' :key="??index3" :card_item='stu'>
</Child-com>
</div>
<div>姓名：{ { card_item.name }} </div>
<div>學(xué)號：{ { card_item.stuId}}</div>
<div v-if="card_item.gender==1">性別：男</d(T_T)iv>
<div v-else>性別：女</div>
3、顯示出學(xué)號尾號為單數(或雙數）的學(xué)生信息 （以單數為例）
danshu (stu_list) {
this.new_li(??-)?st_danshu=[];
stu_list.forEac??h((item) => {
if(item.stuId%2!=0)
this.new_list_danshu.push(item);//符合條件則加進(jìn)用來(lái)存儲單數??信息的json數組
}
)
// alert(this.new_list[1]);
this.flag_all=0; //顯示全部
this.fl(T_T)ag_danshu=1??;//顯示單數
this.fla(′ω｀)g_shuangshu=0;//顯示雙數
},
4、增加學(xué)生信息
add:function(){
var name = document.getElemen??tById("stu_name").value;
var id = document.g??etElementById("stu_id").value;
var gender = document.getElementById("stu_gender").value;
if(name==''||id==''||gender==''){
alert('請完善信息');
}
else{
var item ={ };
item??.stuId=id;
item.name=n┐(′?｀)┌ame;
item.gender=gender;
this.stu_list.push(item);
alert('添加成功'??);
}
}
四、效果展示
五、總結
以下是v-show 和 v-if 的區ヾ(′?｀)?別
v-if 只有在判斷為true的時(shí)候才會(huì )??對數據進(jìn)行(????)渲(′▽?zhuān)?)染，false的時(shí)候把包含的代碼進(jìn)行刪除。除非再次進(jìn)行數據渲染，v-if才會(huì )重新判斷?？梢哉f(shuō)是用法比較傾向于對數據一次操作。
v-( ?ヮ?)show 是無(wú)論??判斷是(′?｀*)什么都會(huì )先對數據(ju)進(jìn)行渲染，只是false的時(shí)候對節點(diǎn)進(jìn)行display:none;的操作。所以再不重新渲染數據的情況下，改變數據的值可以使數據展示或ヽ(′ー｀)ノ隱藏。
到此這篇??關(guān)于基于VUE實(shí)現簡(jiǎn)單的學(xué)生信息管理系統的文章就介紹到這了,更多相關(guān)vue學(xué)生信息管理系統內容(???)請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)ヽ(′ー｀)ノ文章希望大(da)家以后多多支持(′?｀*)腳本之家！
來(lái)源：腳本之(zhi)家
鏈接：https://www.jb51.net/article/203974.htm
