Vue.js学习课程（2 / 6）
07. 过滤器
知识点
- filters
filters
格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等）
<div id="myApp">
<p>{
{message}}</p>
<p>{
{message | toupper }}</p>
<hr>
<p>现在的vue.js学习进度是{
{num}}({
{num | topercentage}})。</p>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
message: 'hello vue.js world.',
num: 0.3
},
filters: {
toupper: function(value){
return value.toUpperCase();
},
topercentage: function(value){
return value * 100 + '%';
},
},
});
</script>
08. 计算属性
知识点
- computed
computed
处理元数据，便于进行二次利用。（比如：消费税自动计算功能）
<div id="myApp">
今年3月3日发卖的任天堂新一代主机Switch的价格是：{
{price}}円，含税价格为：{
{priceInTax}}円，折合人民币为：{
{priceChinaRMB}}元。
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
price: 29980
},
computed: {
priceInTax: function(){
return this.price * 1.08;
},
priceChinaRMB: function(){
return Math.round(this.priceInTax / 16.75);
},
},
});
</script>
09. 观察属性
知识点
- $watch
$watch
与computed属性类似，用于观察变量的变化，然后进行相应的处理。（我从Angular而来）
<div id="myApp">
<p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{
{price}}円，含税价格为：{
{priceInTax}}円，折合人民币为：{
{priceChinaRMB}}元。</p>
<button @click="btnClick(10000)">加价10000円</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
price: 29980,
priceInTax: 0,
priceChinaRMB: 0,
},
watch: {
price: function(newVal, oldVal){
console.log(newVal, oldVal);
this.priceInTax = Math.round(this.price * 1.08);
this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
},
},
methods: {
btnClick: function(newPrice){
this.price += newPrice;
},
},
});
</script>
10. 设定机算属性
知识点
- setter
setter
设置计算属性，同步更新元数据的值。（又是令人费解的描述）
<div id="myApp">
<p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{
{price}}円，含税价格为：{
{priceInTax}}円，折合人民币为：{
{priceChinaRMB}}元。</p>
<button @click="btnClick(10800)">把含税改价为10800円</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
price: 29980
},
computed: {
priceInTax: {
get:function(){
return this.price * 1.08;
},
set: function(value){
this.price = value / 1.08;
}
},
priceChinaRMB: function(){
return Math.round(this.priceInTax / 16.75);
},
},
methods: {
btnClick: function(newPrice){
this.priceInTax = newPrice;
},
},
});
</script>
11. Class绑定
知识点
- v-bind:class
v-bind:class
为html标记绑定样式单class属性。
<div id="myApp">
<div v-bind:class="{active:isActive}">红色文本1</div>
<div :class="{active:isActive}">红色文本2</div>
<button @click="btnClick">改变class吧</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
isActive: true,
},
methods: {
btnClick: function(){
this.isActive = false;
},
},
});
</script>
12. Class对象绑定
知识点
- v-bind:class
v-bind:class
为html标记绑定样式单class对象。
<div id="myApp">
<div :class="myClass">红色文本</div>
<button @click="btnClick">改变class吧</button>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
myClass: {
active: true,
big: true,
},
},
methods: {
btnClick: function(){
this.myClass.big = false;
},
},
});
</script>