Vue.js 实例
本章节为大家介绍几个 Vue.js 实例，通过实例练习来巩固学到的知识点。
导航菜单实例
导航菜单
创建一个简单的导航菜单：
您选择了 {{active}} 菜单
// 创建一个新的 Vue 实例
var demo = new Vue({
// DOM 元素，挂载视图模型
el: '#main',
// 定义属性，并设置初始值
data: {
active: 'home'
},
// 点击菜单使用的函数
methods: {
makeActive: function(item){
// 模型改变，视图会自动更新
this.active = item;
}
}
});
编辑文本实例
文本编辑
点击指定文本编辑内容：
{{text_content}}
var demo = new Vue({
el: '#main',
data: {
show_tooltip: false,
text_content: '点我，并编辑内容。'
},
methods: {
hideTooltip: function(){
// 在模型改变时，视图也会自动更新
this.show_tooltip = false;
},
toggleTooltip: function(){
this.show_tooltip = !this.show_tooltip;
}
}
})
订单列表实例
订单列表
创建一个订单列表，并计算总价：
Services
{{service.name}} {{service.price | currency}}
Total: {{total() | currency}}
// 自定义过滤器 "currency".
Vue.filter('currency', function (value) {
return '$' + value.toFixed(2);
});
var demo = new Vue({
el: '#main',
data: {
// 定义模型属性 the model properties. The view will loop
// 视图将循环输出数组的数据
services: [
{
name: 'Web Development',
price: 300,
active:true
},{
name: 'Design',
price: 400,
active:false
},{
name: 'Integration',
price: 250,
active:false
},{
name: 'Training',
price: 220,
active:false
}
] },
methods: {
toggleActive: function(s){
s.active = !s.active;
},
total: function(){
