vue实现将字符串路径转换为 JavaScript 对象结构代码
代码语言:html
所属分类:其他
代码描述:vue实现将字符串路径转换为 JavaScript 对象结构代码
代码标签: vue 字符串 路径 转换 JavaScript 对象 结构 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400"); *, *::after, *::before { box-sizing: border-box; } body { color: #fff; background: #949c4e; background: linear-gradient( 115deg, rgba(86, 216, 228, 1) 10%, rgba(159, 1, 234, 1) 90% ); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } html, body, .container { min-height: 100vh; } .center { display: flex; justify-content: center; align-items: center; } a { color: #2c3e50; text-decoration: none; } #app { display: flex; } .vue-form { font-size: 16px; width: 500px; padding: 15px 30px; margin: 50px auto; } .vue-form > div { padding: 10px; border-radius: 4px; background-color: #fff; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3); } .vue-form div { position: relative; margin: 20px 0; } .vue-form input { color: #2b3e51; display: block; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 24px; font-family: "Source Code Pro", monospace; padding: 12px; border: 1px solid #cfd9db; background-color: #ffffff; border-radius: 0.25em; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08); } .vue-form input:focus { outline: none; border-color: transparent; box-shadow: 0 0 5px rgba(44, 151, 222, 0.2); } .vue-form button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; font-size: 22px; border: transparent; color: #fff; margin-left: 5px; margin-bottom: 10px; margin-right: 0px; padding: 1rem; transition: top 400ms; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 4px; background: rgba(0, 0, 0, 0.8); box-shadow: rgba(0, 0, 0, 0.3) 0 3px 4px; } .vue-form button:focus { outline: none; border-color: transparent; box-shadow: 0 0 5px rgba(44, 151, 222, 0.2); } .debug { border-radius: 4px; margin: 50px auto; width: 500px; background-color: #000; padding: 50px; background: rgba(0, 0, 0, 0.8); box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3); } .debug h1 { padding-bottom: 10px; } .debug pre { color: #ffffff; font-size: 18px; line-height: 30px; font-family: "Source Code Pro", monospace; font-weight: 300; white-space: pre-wrap; } </style> </head> <body > <div id="app"> <form class="vue-form"> <div> <input type="text" name="path" id="name" v-model="path" autocomplete="off"> </div> <button v-on:click="buttonClicked('a=hello', $event)">a=hello</button> <button v-on:click="buttonClicked('a[0]=hello', $event)">a[0]=hello</button> <button v-on:click="buttonClicked('a.b.c=hello', $event)">a.b.c=hello</button> <button v-on:click="buttonClicked('a.b[1].c=hello', $event)">a.b[1].c=hello</button> <button v-on:click="buttonClicked('a.b.c[2]=hello', $eve.........完整代码请登录后点击上方下载按钮下载查看
网友评论0