vue练习题2

MuFeng@

已于 2023-01-26 14:28:31 修改

阅读量330

点赞数

分类专栏： vue练习题文章标签： vue.js javascript 前端

于 2022-09-28 11:57:23 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58451019/article/details/127086846

版权

vue练习题专栏收录该内容

9 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js"></script>
	<script>
		window.onload = function(){
			new Vue({
				el:'#root',
				data:{
					iStr:''
				},
				//过滤
				filters: {
					fnName: function(val) {
						if(val.length<3){
							return val
						}else if(val.length>=3){
							if(val.substr(val.length-3,val.length) == "ing"){
								return val + "ly"
							}else{
								return val + "ing"
							}
						}
					}
				},
				//销毁
				methods: {
					cansel() {
						this.$destroy();
					}
				},
				//进行数据保存
				mounted:function(){
					this.iStr =  localStorage.getItem("iStr");
					console.group("mounted ---> 挂载完毕状态")
				},
				beforeDestroy:function(){
					localStorage.setItem("iStr",this.iStr);
				},
			})
		}
	</script>
	<body>
		
		<div id="root">
			
			<input type="text" v-model="iStr">
			<div>{{iStr | fnName}}</div>
			<button v-on:click="cansel">保存</button>
			
		</div>
		
	</body>
</html>