用vue基础知识写一个随机点名的小案例

vue的安装以及运行不在此介绍,本文主要介绍小案例.

vue项目名一定要叫App.vue(只要你想运行它,就必须叫这个名字)

 下面来看下代码

 

 

css样式:

<style>

* {

  margin: 0;

  padding: 0;

}

h2 {

  text-align: center;

}

.box {

  width: 600px;

  margin: 50px auto;

  display: flex;

  font-size: 25px;

  line-height: 40px;

}

.qs {

  width: 450px;

  height: 40px;

  color: red;

}

.btns {

  text-align: center;

}

.btns button {

  width: 120px;

  height: 35px;

  margin: 0 50px;

}

</style>

 运行看下效果,终端窗口输入yarn serve

 

注意:因为是动态的,所有在此仅仅看图片,具体的效果各位小伙伴可以去试下,记得每次结束后就把最后出现的人名删除掉,这样就达到了随机点名的效果.