console
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by dchcrzm</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css">
</head>
<body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://www.bejson.com/static/bejson/js/sqlformatter.min.js"></script>
<div id="app">
<div>
<textarea v-model="sqlText"></textarea>
<textarea v-model="formateSqlText"></textarea>
<button @click="format"> 格式化 </button>
</div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#app",
created(){
},
methods: {
format(){
console.log('dsadadasdas')
this.formateSqlText = sqlFormatter.format(this.sqlText)
}
},
data() {
return {
sqlText:null,
formateSqlText:null,
}
},
})
</script>
<style>
*{
padding: 0;
margin: 0;
}
textarea {
width: 1381px;
height: 235px;
}
</style>
</body>
</html>