Vue入门:(v-show v-if v-bind)

v-show

根据表达值的真假,切换元素的显示和隐藏(操纵的是display样式)

<img v-show="表达式" />

如果表达式为true,图片img显示
如果表达式为false,图片img隐藏

v-if

根据表达值的真假,切换元素的显示和隐藏(操纵的是dom元素)

<img v-if="表达式" />

如果表达式为true,图片img显示
如果表达式为false,图片img隐藏

现在我们来写个简单的程序测试一下两者的区别


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<div id="app">
			<button type="button" v-show="isshow">showbutton>
			<button type="button" v-if="isshow">ifbutton>
			<button @click="change" >button>
		div>
	
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					isshow:true
				},
				methods:{
					change:function(){
						this.isshow=!this.isshow;
					}
				}
			})
		script>
	body>
html>

运行图如下所示
Vue入门:(v-show v-if v-bind)_第1张图片
此时两个按钮的属性如下
Vue入门:(v-show v-if v-bind)_第2张图片

当我们点击值为‘变’的的按钮时 默认属性值为true的‘show’按钮和‘if’按钮对应v-show、v-if值取反
此时二者按钮都消失,此时属性如下
Vue入门:(v-show v-if v-bind)_第3张图片

可见show按钮display属性变为了none
而if按钮直接被销毁了


v-bind

设置元素的属性(比如src,title,class
基本使用
v-bind:属性名=表达式

<img v-bind:src="imgsrc" >

v-bind可以简写为符号‘:’

<img :src="imgsrc" >

测试代码


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<div id="app">
			
		
			<img :src="imgsrc" :title="imgtitle" :class="imgclass">
		div>
		
		
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					imgsrc:"img/0.jpg",
					imgtitle:"学习风景",
					imgclass:"imgclass"
				}
			})
		script>
	body>
html>

分别定义了src、title、class属性

注意需要在data里声明属性,不能直接在v-bind属性里写结果值,写的值会被认为为属性名,以至于报未找到属性名错误。


实例:简单图片切换

功能:通过两个按钮实现左右图片切换功能,如果为第一张图片则只能往右切换,如果为最后一张则只能往左切换,即实现此时按钮隐藏。


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body style="text-align: center;">
		<div id="app">
			<button type="button" @click="left" v-show="leftshow"><button>
			<img :src="imgs[index]" style="width: 200px; ">
			<button type="button" @click="right" v-show="rightshow">>button>
		
			
		div>
			
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					imgs:[
					    //图片路径
						"./img/0.jpg",
						"./img/1.jpg",
						"./img/2.jpg",
						"./img/3.jpg",
						"./img/4.jpg",
						"./img/5.jpg",
					],
					index:0,
					leftshow:false,
					rightshow:true
				},
				methods:{
					left:function(){
						
					    this.index--;
						if(this.index==0)
						this.leftshow=false;
						
						if(this.index>=0&&this.index<5){
						this.rightshow=true;
						
						}
						
						
						
					},
					right:function(){
						
						this.index++;
						if(this.index>=0&&this.index<5){
					    this.rightshow=true;
						}
						else if(this.index==5)
						this.rightshow=false;
						
						if(this.index>0)
						this.leftshow=true;
					}
				}
			})
		script>
	body>
html>

你可能感兴趣的:(Vue2.0,vue)