2.Vue v-on指令练习
2019-03-09 本文已影响0人
长生藤
弹窗事件
<body>
<div id="app">
<button type="button" v-on:click='handleClick'>click</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: '张三'
},
methods:{
handleClick:function(){
alert(this.name);
}
}
})
</script>
</body>
将handleClick方法用v-on:click指令和按钮button绑定,当点击click时弹出窗口显示"张三"
隐藏/显示切换属性
<body>
<div id="app">
<h2 v-if="show">{{name}}</h2>
<button type="button" @click='handleClick'>隐藏/显示</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: '张三',
show: true
},
methods:{
handleClick:function(){
this.show = ! this.show;
}
}
})
</script>
</body>
v-on:同等与@;当属性show显示true时,v-if渲染<h2>中属性,当点击按钮时this.show取非true成为false,<h2>中属性就会隐藏
年龄加减
<body>
<div id="app">
<h2>{{age}}</h2>
<button type="button" @click='add'>加一岁</button>
<button type="button" @click="substrct(5)">减5岁</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
age: 30
},
methods:{
add:function(){
this.age + = 1;
},
substrct:function(num){
if(this.age - num < 0){
alert('小于零岁了');
}else{
this.age - = num;
}
}
}
})
</script>
</body>
点击"加一岁"实现add方法实现自己1;点击"减5岁"实现substrct方法实现自减,substrct中的函数为几就自减几
关注和取消关注练习
<body>
<div id="app">
<h2>{{name}}</h2>
<span class="followed link" v-show="followed" @click="handleFollow">
<i class="icon-ok"></i>已关注
</span>
<span class="cancle-followed link" v-show="followed===false" @click="handleFollow">
<i class="icon-plus"></i>关注
</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: '简书作者',
followed: false
},
methods:{
handleFollow:function(){
this.followed = ! this.followed;
}
}
})
</script>
</body>
<i>为图标字体,可以在其中查找自身所需的图标和字体，followed为false时,v-show渲染选择器名为"cancle-followed link"的行内标签,点击之后触发handleFollow方法this.followed取非，v-show渲染名为"followed link"的行内标签
