vue实例方法语法
methods:{
方法名:function(){ }
简化写法:方法名(){}
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div id="app">
a:<input type='text' v-model="a" />+ b:
<input type='text' v-model='b'>= {{sum()}}
</div>
<script>
new Vue({
el: '#app',
data() {
return {
a: "",
b: "",
}
},
methods: {
sum() {
return parseInt(this.a * 1) + parseInt(this.b * 1)
}
}
})
</script>
计算属性
模板内使用表达式非常便利,但是如果在模板中放入太多的逻辑会让模板过重,且难以维护,所以对于任何复杂逻辑,都应当使用计算属性
computed:{
方法名字:function(){}
简写:方法名字(){}
}
翻转字符串
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div id="app">
<p>原字符串: {{ msg }}</p>
<p>计算属性反转字符串: {{ rmovemsg }}</p>
<p>实例方法翻转字符串:{{add()}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello,world!'
},
computed: {
rmovemsg: function() {
return this.msg.split("").reverse().join('');
}
},
methods: {
add() {
return this.msg.split("").reverse().join('');
}
}
})
</script>
过滤器
过滤器,就是将数据被渲染到视图之前进行格式化处理,而不会修改作用域中原有的数据
原则是:左值右量(变量也可以不写)
语法
filtere:{
过滤器:function(参数1,参数2){}
过滤器(参数1,参数2){}
Vue.filter()
说明:定义过滤器时,必须声明参数,并且参数1是固定的,指的是要操作的数据,剩余的参数是调用过滤器时传递进来的
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div class="test">
{{messaga | capitalize}} {{message | capitalize}} {{messagb | capitalize}}
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
messaga: "abc",
message: "def",
messagb: "ghi"
}
})
</script>
简写购物车
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<div id="app">
<ul>
<li v-for="good of goods">
<input type="checkbox" @click="checkbox(good)" />
<span>商品名称:{{good.goodname}}</span>
<input type="button" value="-" @click="changeNum(0,good)" />
<input type="number" v-bind:value="good.num || 0" />
<input type="button" value="+" @click="changeNum(1,good)" />
<span>单价:{{good.price}}</span>
<span>小计:{{((good.num*good.price)?(good.num*good.price):0)|price}}</span>
</li>
</ul>
<p>总金额:{{allPrice | price}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
goods: [{
'id': 0,
'goodname': '肥皂',
'price': 4.3
}, {
'id': 1,
'goodname': '洗发水',
'price': 34
}, {
'id': 2,
'goodname': '洗衣粉',
'price': 7.3
}],
goodnumber: null,
},
methods: {
// 改变数量
changeNum(arg1, item) {
if (!item.num) {
// $set是添加值
this.$set(item, 'num', 0);
}
// 判断为真的时候为增加的方法,否则为假的方法
if (arg1) {
item.num++;
} else {
item.num--;
}
},
// 设置选中与不选中
checkbox(item) {
if (item.active) {
this.$set(item, 'active', false);
} else {
this.$set(item, 'active', true);
}
console.log(item);
}
},
filters: {
price(arg) {
return arg.toFixed(2) + '元';
}
},
computed: {
// 计算总价
allPrice() {
var result = 0;
for (var i in this.goods) {
if (this.goods[i].active) {
result += this.goods[i].price * this.goods[i].num;
}
}
return result;
}
}
})
</script>
计算属性和实例方法区别:
计算属性有缓存,而实例方法没有缓存
使用计算属性的时候,{{计算属性名}}
使用实例方法时,{{方法名()}}
参数的传递 实例方法可以传递参数 但计算属性不能
计算属性和实例方法共同点:
数据的监听 计算属性和实例 都会监听原数据(数据改变 逻辑重新执行)