{"id":521,"date":"2020-02-26T20:53:00","date_gmt":"2020-02-26T12:53:00","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=521"},"modified":"2020-02-26T20:53:00","modified_gmt":"2020-02-26T12:53:00","slug":"vue-%e8%a1%a8%e5%8d%95%e6%8e%a7%e4%bb%b6%e7%bb%91%e5%ae%9a","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/26\/vue-%e8%a1%a8%e5%8d%95%e6%8e%a7%e4%bb%b6%e7%bb%91%e5%ae%9a\/","title":{"rendered":"Vue-\u8868\u5355\u63a7\u4ef6\u7ed1\u5b9a"},"content":{"rendered":"
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n\n       <!-- <div v-model=\"dwa\">\n         \n       <\/div> -->\n       <input type=\"text\" v-model=\"mytext\"\/>\n\n        {{mytext}}\n\n      \n       <textarea v-model=\"mytext\"><\/textarea>\n\n       \u8bb0\u4f4f\u7528\u6237\u540d\uff1a<input type=\"checkbox\" v-model=\"isChecked\"\/>\n       \n       <br\/>\n       vue:<input type=\"checkbox\" v-model=\"checkedgroup\" value=\"vue\"\/>\n       react:<input type=\"checkbox\" v-model=\"checkedgroup\" value=\"react\"\/>\n       jquery:<input type=\"checkbox\" v-model=\"checkedgroup\" value=\"jquery\"\/>\n    \n       {{checkedgroup}}\n\n       <br\/>\n\n       vue:<input type=\"radio\" value=\"vue\"  name=\"favorlan\" v-model=\"picked\"\/>\n       react:<input type=\"radio\" value=\"react\" name=\"favorlan\" v-model=\"picked\"\/>\n       jquery:<input type=\"radio\" value=\"jquery\" name=\"favorlan\" v-model=\"picked\"\/>\n\n       <button>confirm<\/button>\n    <\/div>\n\n    <!-- <div v-model=\"\"><\/div> -->\n\n    <script type=\"text\/javascript\">\n    \t\n    \tvar vm = new Vue({\n    \t\tel:\"#box\",\n\n    \t\tdata:{\n              name:\"xiaoming\",\n              mytext:\"11111\",\n              isChecked:false,\n              checkedgroup:[],\/\/    \n              picked:\"\"\n    \t\t}\n    \t})\n\n      \n      \/*\n          v-model \u7ed1\u5b9a\u662f \u72b6\u6001 \u8ddf \u63a7\u4ef6 value\u503c\u6216\u8005checked\n\n          \u591a\u4e2a\u591a\u9009\u6846 \u7ed1\u5b9a \u9700\u8981\u7ed1\u5b9a\u4e00\u4e2a\u6570\u7ec4\uff0c \u9700\u8981\u6bcf\u4e2a\u63a7\u4ef6\u90fd\u6709\u4e00\u4e2avalue\u503c\n       *\/\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
\u8d2d\u7269\u8f66\uff1a<\/strong><\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n      <input type=\"checkbox\" @change=\"handleAllChecked()\" v-model=\"isAllChecked\"\/>\n      <ul>\n        <li v-for=\"data in datalist\" :key=\"data.id\">\n          <input type=\"checkbox\" @change=\"handleChange()\" v-model=\"checkgroup\" :value=\"data\"\/>{{data}}\n\n          <button @click=\"handleDelClick(data)\">del<\/button>\n          <input type=\"number\" v-model=\"data.number\"\/>\n          <button @click=\"handleAddClick(data)\">add<\/button>\n        <\/li>\n      <\/ul>\n      {{checkgroup}}\n      <p>\u603b\u91d1\u989d{{sum}}<\/p>\n\n      <p>\u8ba1\u7b97\u5c5e\u6027\u603b\u91d1\u989d{{computedShopcarSum}}<\/p>\n    <\/div>\n   \n    <script type=\"text\/javascript\">\n    \t\n    \tvar vm = new Vue({\n    \t\tel:\"#box\",\n\n    \t\tdata:{\n              checkgroup:[],\n              isAllChecked:false,\n              sum:0,\n              datalist:[\n                {\n                  name:\"\u5546\u54c11\",\n                  price:10,\n                  number:1,\n                  id:\"1\",\n                  \/\/ url:\"https:\/\/www.baidu.com\/img\/bd_logo1.png?qua=high\"\n                },\n                {\n                  name:\"\u5546\u54c12\",\n                  price:20,\n                  number:2,\n                  id:\"2\",\n                  \/\/ url:\"https:\/\/www.baidu.com\/img\/bd_logo1.png?qua=high\"\n                },\n                {\n                  name:\"\u5546\u54c13\",\n                  price:30,\n                  number:3,\n                  id:\"3\",\n                  \/\/ url:\"https:\/\/www.baidu.com\/img\/bd_logo1.png?qua=high\"\n                }\n\n              ]\n    \t\t},\n\n        methods:{\n          handleAllChecked(){\n            console.log(\"\u5904\u7406\u591a\u9009\u6309\u94ae\",this.isAllChecked);\n\n            if(this.isAllChecked){\n              this.checkgroup = this.datalist;\n            }else{\n              this.checkgroup = [];\n            }\n\n            this.computedsum();\n          },\n\n          handleDelClick(data){\n            data.number--;\n            if(data.number===0){\n              data.number=1;\n            }\n\n            this.computedsum();\n          },\n\n          handleAddClick(data){\n            data.number++;\n            this.computedsum();\n          },\n\n          handleChange(){\n            \/\/ console.log(\"111\")\n            if(this.checkgroup.length === this.datalist.length){\n              console.log(\"\u5168\u9009\u4e2d\")\n              this.isAllChecked = true;\n            }else{\n              console.log(\"\u6ca1\u5168\u9009\")\n              this.isAllChecked = false;\n            }\n\n\n            this.computedsum();\n          },\n\n          computedsum(){\n            console.log(\"\u91cd\u65b0\u8ba1\u7b97\u603b\u91d1\u989d\uff0c\u5173\u6ce8\u5df2\u7ecf\u52fe\u9009\u7684\u6570\u636e\uff0c\u7d2f\u52a0\u8ba1\u7b97\u5c31\u53ef\u4ee5\u4e86\")\n            var mysum = 0;\n            for(var i=0;i<this.checkgroup.length;i++){\n              mysum += this.checkgroup[i].number*this.checkgroup[i].price;\n            }\n\n            this.sum = mysum;\n          }\n        },\n\n        computed:{\n          computedShopcarSum(){\n            var mysum = 0;\n            for(var i=0;i<this.checkgroup.length;i++){\n              mysum += this.checkgroup[i].number*this.checkgroup[i].price;\n            }\n            return mysum;\n          }\n        }\n\n    \t})\n\n\n      \/*\n      \n          checkbox \u7ed1\u5b9a\u662f \u6570\u7ec4\uff0c \u9700\u8981\u8bbe\u7f6evalue(\u52a8\u6001\u7ed1\u5b9a \uff1a) ,\n          value \u5bf9\u8c61\n\n       *\/\n      \/\/ var name=\"kerwin\"\n      \/\/ var obj = {\n      \/\/   name:name,\n      \/\/   getName:function(){\n\n      \/\/   }\n      \/\/ }\n\n      \/\/ var obj2= {\n      \/\/   name,\n      \/\/   getName(){\n\n      \/\/   }\n      \/\/ }\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
\u4fee\u9970\u7b26<\/strong><\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<\/head>\n<body>\n    <div id=\"box\">\n       <input type=\"text\" v-model.lazy=\"name\" \/>\n       {{name}}\n\n\n       <input type=\"number\" v-model.number=\"age\"\/>\n       {{age}}\n\n       \n       <input type=\"text\" v-model.trim=\"mytext\"\/>\n\n       |{{mytext}}| \n    <\/div>\n   \n    <script type=\"text\/javascript\">\n    \t\n    \tvar vm = new Vue({\n    \t\tel:\"#box\",\n\n    \t\tdata:{\n              name:\"xiaoming\",\n              age:100,\n              mytext:\"\"\n    \t\t},\n        watch:{\n\n          name(){\n            console.log(\"name\u6539\u53d8\u4e86\uff0c-\u590d\u6742\u8fd0\u7b97\")\n          }\n          \n        }\n    \t})\n\n      \/\/\u8bed\u6cd5\u7cd6\n      \/\/ v-model  es5 get set\u62e6\u622a \uff0cinput(input type=text) , change(checkbox)\n      \/\/ \n      \/\/ polyfill \u817b\u5b50\u7c89\n      \/\/ promsie -polyfill\n      \/\/ fetch fetch polyfill\n      \/\/ \n      \/\/ \u8f6e\u5b50 \uff08jquery \u63d2\u4ef6\uff09\n       \n       \n      \/\/ \u517c\u5bb9\u6027 \uff1ahttps:\/\/caniuse.com\n    <\/script>\n<\/body>\n<\/html>\n\n<\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset= …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[9,10],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/521"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=521"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/521\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}