|
<div class="cnblogs_code">
<span style="color: #0000ff">< <span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">charset<span style="color: #0000ff">="UTF-8"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">name<span style="color: #0000ff">="viewport"<span style="color: #ff0000"> content<span style="color: #0000ff">="width=device-width,initial-scale=1.0"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">http-equiv<span style="color: #0000ff">="X-UA-Compatible"<span style="color: #ff0000"> content<span style="color: #0000ff">="ie=edge"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">title<span style="color: #0000ff">>给vue部分data数据从新赋值<span style="color: #0000ff"></<span style="color: #800000">title<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">src<span style="color: #0000ff">="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>比如说，搜索按钮的清空筛选条件，或者管理平台新增成功后给数据赋值为空,大量数据，挨个赋值比较麻烦,所以封装一个方法<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">>点击下面的清空按钮：清空标题，改变结尾，内容不变,<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">id<span style="color: #0000ff">="app"<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">h1<span style="color: #0000ff">><span style="color: #000000">
现在的标题： <span style="color: #0000ff"><<span style="color: #800000">span <span style="color: #ff0000">style<span style="color: #0000ff">="color:red;"<span style="color: #0000ff">> {{title}} <span style="color: #0000ff"></<span style="color: #800000">span<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">h1<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">><span style="color: #000000">
现在的内容: <span style="color: #0000ff"><<span style="color: #800000">span <span style="color: #ff0000">style<span style="color: #0000ff">="color:red;"<span style="color: #0000ff">> {{content}} <span style="color: #0000ff"></<span style="color: #800000">span<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">p<span style="color: #0000ff">><span style="color: #000000">
测试的结尾: <span style="color: #0000ff"><<span style="color: #800000">span <span style="color: #ff0000">style<span style="color: #0000ff">="color:red;"<span style="color: #0000ff">> {{end}} <span style="color: #0000ff"></<span style="color: #800000">span<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">p<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">button <span style="color: #ff0000">@click<span style="color: #0000ff">="empty_btn()"<span style="color: #0000ff">>清空<span style="color: #0000ff"></<span style="color: #800000">button<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>
<span style="background-color: #f5f5f5; color: #008000">/*<span style="background-color: #f5f5f5; color: #008000">
-
@Author: shuige 曾经的水哥
-
@Date: 2018-12-24 13:21:19
-
@Last Modified by: shuige
-
@Last Modified time: 2018-12-24 13:25:43
<span style="background-color: #f5f5f5; color: #008000">*/
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> app <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">new<span style="background-color: #f5f5f5; color: #000000"> Vue({
el: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">#app<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,data: {
title: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">111<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,content: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">这是测试文字<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,end: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">这是结尾<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">
},methods: {
empty_btn: <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {
<span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">.empty_way({
title: <span style="background-color: #f5f5f5; color: #000000">''<span style="background-color: #f5f5f5; color: #000000">,end: <span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">改变end<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">
})
},empty_way: <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> (empty_data) {
<span style="background-color: #f5f5f5; color: #0000ff">for<span style="background-color: #f5f5f5; color: #000000"> (let key <span style="background-color: #f5f5f5; color: #0000ff">in<span style="background-color: #f5f5f5; color: #000000"> empty_data) {
<span style="background-color: #f5f5f5; color: #0000ff">this<span style="background-color: #f5f5f5; color: #000000">[key] <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> empty_data[key]
}
},},mounted() {
},})
<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
