<!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>
vue练习题2
于 2022-09-28 11:57:23 首次发布