文章目录
前言
Vue.js中的字符串处理主要是依赖于JavaScript的字符串方法,Vue.js本身并没有提供额外的字符串处理方法,但它允许你在模板、计算属性和方法中方便地使用这些JavaScript方法。想要了解JavaScript 字符串常用方法,请参考下面文章。
JavaScript 字符串常用方法
在模板中使用
html
<div id="app">
<p>{{ message.toUpperCase() }}</p>
<p>{{ message.substring(0, 5) }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
在计算属性中使用
html
<div id="app">
<p>{{ upperMessage }}</p>
<p>{{ firstFiveChars }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
upperMessage() {
return this.message.toUpperCase();
},
firstFiveChars() {
return this.message.substring(0, 5);
}
}
});
</script>
在方法中使用
html
<div id="app">
<p>{{ convertMessage() }}</p>
<p>{{ getFirstFiveChars() }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
convertMessage() {
return this.message.toUpperCase();
},
getFirstFiveChars() {
return this.message.substring(0, 5);
}
}
});
</script>