Vue基础(二):常用的vue指令
程序员文章站
2022-05-15 17:38:19
...
Vue基础(二)
一.V-model修饰符
v-model除了能绑定数据,还能在绑定的基础上加一些修饰符
比如: .lazy 懒惰的 .number 只能输入数字 .trim 自动过滤收尾的空白字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue的双向绑定v-model</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg">
<!--
修饰符
.lazy 懒惰的
.number 只能输入数字
.trim 自动过滤收尾的空白字符
-->
<input type="text" v-model.lazy="txt">
<label for="">{{txt}}</label>
<br>
<input type="text" v-model.trim="txt">
<label for="">{{txt}}</label>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'Home',
}
})
</script>
</body>
</html>
二.计算属性之computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性computed。
<div id="app">
<p>Original message: "{{ msg}}"</p>
<p>Computed reversed message: "{{ rMsg}}"</p>
</div>
new Vue({
el: '#app',
data: {
msg: 'Hello'
},
computed: {
rMsg: function () {
return this.msg.split('').reverse().join('')
}
}
})
计算属性的优点:
能够产生缓存,如果数据没有发生变化,直接从缓存中取数据
需要注意的是,计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
<div id="app">
{{content}}
<input type="text" v-model='content' @input='handleInput'>
<button @click='handleClick'>提交</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
handleInput: function (event) {
const { value } = event.target;
this.content = value;
},
handleClick:function(){
if(this.content){
console.log(this.content);
}
}
},
computed: {
content: {
set: function (newV) {
this.msg=newV;
},
get: function () {
return this.msg;
}
}
}
})
</script>
现在再运行 vm.content= ‘JayChou’ 时，setter 会被调用，vm.msg 也会相应地被更新。
三.过滤器
过滤器的实质:说白了就是给数据添油加醋
过滤器分为全局过滤器和局部过滤器
创建全局过滤器，创建一次，在各个组件中都能使用
//全局过滤器
Vue.filter('myReverse',(val)=>{
return val.split('').reverse().join('');
})
new Vue({
el: '#app',
data: {
msg:'hello 过滤器',
}
})
局部过滤器:只能在局部中使用
<div id="app">
{{price | myPrice('$')}}
<h3>{{msg | myReverse}}</h3>
</div>
<div class="opp"></div>
<script>
//为数据添油加醋
//$10
//创建全局过滤器，创建一次，在各个组件中都能使用
Vue.filter('myReverse',(val)=>{
return val.split('').reverse().join('');
})
new Vue({
el: '#app',
data: {
msg:'hello 过滤器',
price: 10
},
methods:{
newName:function(){
}
},
filters: {//局部过滤器,只能在局部中使用
myPrice: function (price,a) {
// myPrice过滤器的名字
// console.log(price);
return a+price;
}
}
})
</script>
总结
以上就是今天要讲的内容，感谢您的阅读
上一篇： vue.js指令
下一篇： vue常用指令和优势-01