使用计算属性改写代码
浏览量:3025
时间:2024-01-11 11:37:12
作者:采采
打开WebStorm开发工具,新建一个名为‘’的文件,并将vue.js文件放在同一目录下,并将其引入页面中。
lt;script type"text/javascript" src"vue.js"gt;lt;/scriptgt;
在body标签内添加一个div标签,用于测试字符串分割功能,并输出分割后的第一组元素。代码如下:
lt;!DOCTYPE htmlgt;
lt;html lang"en"gt;
lt;headgt;
lt;meta charset"UTF-8"gt;
lt;script type"text/javascript" src"vue.js"gt;lt;/scriptgt;
lt;titlegt;Titlelt;/titlegt;
lt;/headgt;
lt;bodygt;
lt;div id"app"gt;
lt;h2gt;{{ msg.split(';')[0] }}lt;/h2gt;
lt;/divgt;
lt;scriptgt;
var vue new Vue({
el: "#app",
data: {
msg: "hello,world",
},
});
lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;
使用计算属性优化代码
上述代码能够实现效果,但不够优雅。我们可以使用计算属性来改写代码,如下所示:
lt;!DOCTYPE htmlgt;
lt;html lang"en"gt;
lt;headgt;
lt;meta charset"UTF-8"gt;
lt;script type"text/javascript" src"vue.js"gt;lt;/scriptgt;
lt;titlegt;Titlelt;/titlegt;
lt;/headgt;
lt;bodygt;
lt;div id"app"gt;
lt;h2gt;{{ splitStr }}lt;/h2gt;
lt;/divgt;
lt;scriptgt;
var vue new Vue({
el: "#app",
data: {
msg: "hello,world",
},
computed:{
splitStr(){
return (';')[0];
}
}
});
lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;
为计算属性添加setter方法
为了更改用于计算的值,我们可以为计算属性添加setter方法。代码如下:
lt;!DOCTYPE htmlgt;
lt;html lang"en"gt;
lt;headgt;
lt;meta charset"UTF-8"gt;
lt;script type"text/javascript" src"vue.js"gt;lt;/scriptgt;
lt;titlegt;Titlelt;/titlegt;
lt;/headgt;
lt;bodygt;
lt;div id"app"gt;
lt;h2gt;{{ splitStr }}lt;/h2gt;
lt;button v-on:click"clickHandler"gt;点我更改值lt;/buttongt;
lt;/divgt;
lt;scriptgt;
var vue new Vue({
el: "#app",
data: {
msg: "hello,world",
},
methods: {
clickHandler() {
this.splitStr "world,hello";
}
},
computed: {
splitStr:{
get(){
return (';')[0];
},
set(newValue){
newValue;
}
}
}
});
lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;
查看效果
打开网页,点击按钮后,可以看到输出的内容已成功更改。
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
上一篇
如何设置CAD中的捕捉间距
下一篇
如何关闭飞书中的24小时制