Javascriptjson字符串和数组互转json格式化html

关键点在这里JSON.stringify(mock,null,4).toString()有格式化的作用&＃xff0c;v-model以后取到的是字符串&＃xff0c;所有都得转成数组结构。

<div id&＃61;"app"><div class&＃61;"container"><div class&＃61;"fl" style&＃61;"width:50%"><textarea class&＃61;"jsonBox" id&＃61;"jsonBox" v-model&＃61;"model">textarea>div><div class&＃61;"formCreate fr" id&＃61;"formCreate" style&＃61;"width:50%">div><button &＃64;click&＃61;"markHtml">生成htmlbutton>div>
div>
<script>// 显示jsonlet mock &＃61; [{type:"input",title:"商品名称",//label名称field:"goods_name",//字段名称value:"商品名称",//input值,props: {"type": "text", //输入框类型&＃xff0c;可选值为 text、password、textarea、url、email、date"clearable":false, //是否显示清空按钮"disabled": false, //设置输入框为禁用状态"readonly": false, //设置输入框为只读"rows": 4, //文本域默认行数&＃xff0c;仅在 textarea 类型下有效"autosize": false, //自适应内容高度&＃xff0c;仅在 textarea 类型下有效&＃xff0c;可传入对象&＃xff0c;如 { minRows: 2, maxRows: 6 }"number": false, //将用户的输入转换为 Number 类型"autofocus": false, //自动获取焦点"autocomplete": "off", //原生的自动完成功能&＃xff0c;可选值为 off 和 on"placeholder": "请输入商品名称", //占位文本"size": "default", //输入框尺寸&＃xff0c;可选值为large、small、default或者不设置,"spellcheck": false, //原生的 spellcheck 属性"required":false,}}];vm &＃61; new Vue({el:&＃39;#app&＃39;,data:{formData:{},model:&＃39;&＃39;},computed:{mocks(){return JSON.stringify(mock,null,4).toString() //~~~1}},methods:{markHtml(){var model &＃61; JSON.parse(this.model); //~~~2window.formData &＃61; {};let root &＃61; document.getElementById(&＃39;formCreate&＃39;);$f &＃61; this.$formCreate(model,{el:root,});}}});
script>


//数组转json
var arr &＃61; [1,2,3,4,5];
JSON.stringify(arr).toString();//json转数组
var jsonStr &＃61; JSON.stringify(arr).toString();
var v &＃61; JSON.parse(jsonStr);
console.log(v[1], v[2]);
//2&＃xff0c;3