1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{ message | capitalize }} 11 </div> 12 13 <script> 14 new Vue({ 15 el: '#app', 16 data: { 17 message: 'runoob' 18 }, 19 filters: { 20 capitalize: function (value) { 21 if (!value) return '' 22 value = value.toString() 23 return value.charAt(0).toUpperCase() + value.slice(1) 24 } 25 } 26 }) 27 </script> 28 </body> 29 </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
</body>
</html>