v-if,v-else,v-else-if
实现逻辑判断控制
代码
html:
<div id="app">
<div v-if="role == 'admin'">
管理员你好
</div>
<div v-else-if="role == 'hr'">
hr你好
</div>
<div v-else>
您没有管理权限
</div>
</div>
js:
var app = new Vue({
el:"#app",
data:{
role:'admin',
}
})
全局和局部组件
组件是vue中的基本单位,定义好的组件在应用上类似于一个标签,在html中使用即可,具体定义在js文件中,包括模板和方法。
定义一个全局组件
js:
// 定义一个全局组件 其中alert为自定义的组件名
Vue.component('alert',{
// <!-- template模板 -->
template:'<button @click="on_click">ttt</button>',
// <!-- 方法 -->
methods:{
on_click:function(){
alert("Yo,");
}
}
});
//设定其作用域为app中
new Vue({
el:'#app'
});
html:
<div id="app">
<alert>
</alert>
</div>
这种方式定义的全局组件在整个js文件中全部可见,相当于html中的window对象,但在实际用时,全局组件比较少用,一般定义局部组件。局部组件先可以将模板和方法封装在一个对象中,然后在vue对象中作为components键中的一个自定义组件名(作为内部键)的值引入。如下:
js:
//封装组件内容为一个对象
var alert_component={
// <!-- template模板 -->
template:'<button @click="on_click">ttt</button>',
// <!-- 方法 -->
methods:{
on_click:function(){
alert("Yo,");
}
}
}
// 设置一个域:自定义组件componet作用范围
//
new Vue({
el:'#seg1',
//在seg1域中定义一个alert局部组件。
components:{
alert:alert_component,
}
});
组件构建
组件构建及填充组件的血肉,充实他的功能。我的理解是在Vue中,组件类似于一个对象,有属性也有方法,通过bind设置组件的属性,通过v-on设置他的对应事件的处理函数如点击,也就是方法。在组件中定义变量是通过data这样一个函数来实现的,在data函数内部return一个对象,对象中的键值对就是要定义的变量,在mothods中使用这些变量时需要加上this.前缀,因为这些变量时component对象的。同时我感觉Vue在后台有某些机制运行,实时监测在html中双引号{{}}中变量的改变并实时刷新,代码
js:
Vue.component('up',{
//模板
//Vue中的某种机制在后台运行中一直监听like_count的变化并实时更新
//:class="{liked:liked}"的作用是绑定一个类liked_style,
//当变量liked为真时,此类起效,否则失效。
template:"<button :class='{abcd:uped}' @click=toggle_up>顶({{up_count}})</button>",
//感觉相当于变量定义, //这里的data和vue的不一样,这里是一个function
data:function(){
return{
up_count:10,
uped:false,//这个变量在内部mothod中看不到,变量属于组件,所以应该在mothod中加this前缀
};
},
methods:{
toggle_up:function(){
//如果没有顶过则加加,否则减减
if(!this.uped)
this.up_count++;
else
this.up_count--;
//取反标志
this.uped=!this.uped;
}
}
});
//组件作用域
new Vue({
el:"#app",
})