vue笔记

原创已于 2022-10-21 09:11:15 修改 · 1.7w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2017-05-05 15:12:02 首次发布

贤弟专栏收录该内容

249 篇文章

订阅专栏

本文通过一个简单的实例展示了如何使用Vue.js创建一个动态展示字符串的应用。包括了如何定义Vue实例，设置数据属性并应用自定义过滤器来改变显示内容。

vue笔记

There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.

<!DOCTYPE html>
<html lang="en">
<body>
	<div id="app">
		{{ str | upper }}
		{{ str2 | lower}}
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script>

		var app = new Vue({
			el:'#app',
			data:{
				str: 'abc',
				str2: 'HN'
			},
			filters:{
				upper:function(value){
					return value.toUpperCase();
				},
				lower:function(value) {
					return value.toLowerCase();
				}
				
			}
		})
	</script>
</body>
</html>

关注博主即可阅读全文