【前端框架开发 | Vue.js | 第四篇】Vue.js模板语法之指令、用户输入及过滤器
<template>
<div>
<input v-model="message" placeholder="编辑我">
<p>输入的消息是: {{ message }}</p>
<p v-text="message"></p> <!-- 使用 v-text 指令来展示消息 -->
<p>{{ message | capitalize }}</p> <!-- 使用过滤器将消息转换为首字母大写 -->
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
filters: {
capitalize(value) {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
}
</script>这个例子展示了如何在Vue组件中使用v-model来实现用户输入绑定，使用v-text来显示文本，以及如何使用过滤器来格式化显示的数据。这些是Vue.js模板语法的基本用法，对于学习Vue开发者来说具有很好的示例价值。
评论已关闭