Vue.component('alert-box',{ template:`<div> <div v-if="active"> <h2>{{ tit }}</h2> <p>{{ main }}</p> </div> <ul> <li @click="handleNo">取消</li> <li @click="handleOk">确定</li> </ul> </div>`, props:{ tit:String, main:String }, data:function(){ return { active:true } }, methode:{ handleOk:function(){ this.active = false; }, handleNo:function(){ this.active = false; } } })
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /*ddd*/ .bg{ height: 200px; width: 360px; text-align: center; margin: 300px auto; background-color: white; border-radius: 5px; } .hello{ font-size: 25px; text-align: center; padding: 20px; } .modal{ color: gray; font-size: 18px; padding: 15px 0 25px 0; text-align: center; } .bt{ width: 280px; margin: auto; padding-top: 18px; font-size: 22px; } .qx{ width: 110px; cursor: pointer; text-align: left; display: inline-block; } .qd{ width: 110px; color: green; text-align: right; cursor: pointer; display: inline-block; } </style> </head> <body bgcolor="black"> <div class="bg"> <div class="hello">hello</div> <div class="modal">this is a modal</div> <div class="bt"> <div class="qx">取消</div> <div class="qd">确定</div> </div> </div> </body> </html>