vue培训第二课

index_pj_2.html

+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="utf-8">
+    <title>demo1</title>
+    <script type="text/javascript" src='js/jquery-3.3.1.js'></script>
+    <!-- <link rel="stylesheet" href="css/index.css"> -->
+</head>
+<script type="text/javascript">
+
+
+
+
+// function changeState(){
+//   if ($("#myStatus").html()=='正常') {
+//       $("#myStatus").html("正在上传")
+//   } else {
+//       $("#myStatus").html("正常")
+//   }
+// }
+////////////////////////////////////
+// let str = 1;
+///////////////////////////////////
+let data = [
+  {
+    key:"str1",
+    value:"hello"
+  },
+  {
+    key:"str2",
+    value:"Welcome to our website"
+  },
+  {
+    key:"str3",
+    value:"Pengjisoft"
+  },
+  {
+    key:"data1",
+    value:"content2"
+  },
+  {
+    key:'btData1',
+    value:"更改我自己的内容"
+    },
+    {
+        key:'string1',
+        value:'this is a temp v'
+    },
+    {
+        key:'string2',
+        value:'aaa'
+    },
+]
+//更换全都字符串,代码抄的.
+String.prototype.replaceAll  = function(s1,s2){
+    return this.replace(new RegExp(s1,"gm"),s2);
+}
+
+function setData(){
+  let bodyHtml = document.body.innerHTML
+  // console.log('bodyHtml'+bodyHtml )
+  let bodyHtmlBind = bodyHtml
+  // console.log('bodyHtmlBind:'+bodyHtmlBind )
+
+  let target,lable = ""
+  for (let i = 0; i < data.length; i++) {
+      target="{{" + data[i].key + "}}"
+      // console.log('target:', target )
+      lable="<CON key='"+ data[i].key+"'>" + data[i].value+"</CON>";
+      // console.log('lable:', lable )
+      bodyHtmlBind = bodyHtmlBind.replaceAll(target,lable)
+      // 主要是这里的次数是data决定的,如何才能是具体内容决定呢?
+       // $(target).replaceAll(lable);
+  }
+  document.body.innerHTML = bodyHtmlBind;
+}
+
+
+function setDataItem(key,value){
+    // let btid = btid
+    console.log(event.target)
+    var target = event.target
+  let index = -1;
+  for (var i = 0; i < data.length; i++) {
+    if (data[i].key==key) {
+      data[i].value=value;
+      index=i;
+      break;
+    }
+   }
+   if(index>=0){
+        // console.log('index:'+ index)
+        let bindingDom=$(target)
+        console.log('bindingDom.len:'+ bindingDom.length)
+        // function(event) {
+        //     alert(event.target);
+        //     }
+        bindingDom.html(data[index].value)
+        // console.log(data[index].value)
+   }
+}
+// function changeMyString(){
+//     setDataItem('string1',"我...");
+//     setDataItem('string2',"ni...");
+// }
+// changeState();
+
+</script>
+<body>
+    <div class="title">状态: <span id="myStatus">{{str1}}</span></div>
+    <button onclick="setData()">上传{{str2}}</button>
+    <button onclick="setDataItem('btData1','新的内容')" id="bt2"  >{{btData1}}</button>
+    <button onclick="setDataItem('btData1','新的内容')" id="bt3" >{{btData1}}</button>
+
+    <!-- <input type="text" name="" value=""> -->
+
+
+<!-- <div onclick='changeMyString()'>{{string1}} {{btData1}}</div>
+<div class='btData'  v-for='item in array1'>{{item.name}}</div> -->
+    <script type="text/javascript">
+    setData();
+    // setDataItem(key,value)
+    </script>
+</body>
+
+</html>