vue.js技术知识点之-将json里面的字符串转为json对象并循环输出

方法一：通过toJson方法将json里面的字符串转为json对象并循环输出 {{indexs}}{{index}}-{{item}} 方法二：通过filters过滤将json里面的字符串转为json对象

fan_xiao0529

11695人浏览 · 2017-09-08 10:00:21

fan_xiao0529 · 2017-09-08 10:00:21 发布

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
   </head>
   <body>
       <div id="app">
           <div>方法一：通过toJson方法将json里面的字符串转为json对象并循环输出</div>
           <div v-for="(items,vals,indexs) in toJson(ab)">
               <div v-for="(item,val,index) in items">
                   {{indexs}}{{index}}-{{item}}
               </div>
           </div>
           <div>方法二：通过filters过滤将json里面的字符串转为json对象并输出</div>
           <div>{{ab|desc}}</div>
       </div>
   </body>
</html>

<script type="text/javascript">
   new Vue({
       el: '#app',
       data: {
               ab: "{\"message\":{\"desc\":\"查询数据源失败！\",\"status\":\"111111\"},\"message1\":{\"desc\":\"查询数据源成功！\",\"status\":\"000000\"}}",
       },
       methods: {
           //字符串转为json格式
           toJson:function(str){
              _str =(new Function("","return "+str))();
                 console.log(_str);
              return _str;
           }
       },
       filters:{
           desc: function(value) {
               if(!value) return '';
               _value =(new Function("","return "+value))();
               console.log(_value);
               return _value.message.desc;
            }
       }

   });
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^