Vue 字符串常用方法

文章目录

• 前言
• 在模板中使用
• 在计算属性中使用
• 在方法中使用

---

前言

Vue.js中的字符串处理主要是依赖于JavaScript的字符串方法，Vue.js本身并没有提供额外的字符串处理方法，但它允许你在模板、计算属性和方法中方便地使用这些JavaScript方法。想要了解JavaScript 字符串常用方法，请参考下面文章。
JavaScript 字符串常用方法

---

在模板中使用

<div id="app">  
  <p>{{ message.toUpperCase() }}</p>  
  <p>{{ message.substring(0, 5) }}</p>  
</div>  
  
<script>  
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  }  
});  
</script>

---

在计算属性中使用

<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>

---

在方法中使用

<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>

---