v-if和v-show

共同点

• 都能够控制元素的显示或者是隐藏

手段的区别

• v-if指令是先经过判断是否经过，才会创建DOM节点，根据DOM节点来控制显示与隐藏
• v-show指令是通过改变元素的CSS属性来决定元素是显示还是隐藏。display:block或者display:none

编译过程的区别

• v-if指令的条件渲染，取决于，是真是假，在切换过程中，条件块内的事件监听和子组件会被销毁和重建
• v-show指令总是会被渲染，只是单纯的基于css进行切换

开销问题

• v-if指令有更高的切换开销，但是如果运行时，不经常改变可使用v-if，那就可使用v-if指令
• v-show指令有更高的初始渲染开销，如果需要频繁的切换，则使用v-show指令更好

v-if的使用

v-if可以单纯的实现消失或者隐藏 单种功能

<view class="block-right-bottom">
						<text class="date2">{{item.date}}</text>
						<text class="look"  v-if="item.type1">{{item.look}}</text>
</view>

{
					  type:false,
					  type1:false,
					  color:true,
					  pic:'../../static/PDF.png',
					  title :'24小时实况要素统计',
					  msg:'最大雨量为宾阳桥东黎国家气象观测站为2.4毫米。最低气温为西林12.2℃。最高气温为平南32.1℃ ',
					  date:'2020-11-20:00:00',
					  look: '5浏览'
					},

则可以控制type1的消失或者是隐藏的功能

v-if v-else的联合使用

<view class="block" v-for="(item,index) in temper" :key='index'>
			<view class="blockin"  v-if="item.type">
				<view class="block-left">
					<image class="PDF" :src="item.pic"></image>
				</view>
				<view class="block-right" v-if="item.color">
					<text class="fonttitle">{{item.title}}</text>
					<view class="dis">
						<text class="fontcontent">{{item.msg}}</text>
					</view>
					<view class="block-right-bottom">
						<text class="date">{{item.date}}</text>
						<text class="look">{{item.look}}</text>
					</view>
				</view>
				<view class="block-right1" v-else>
					<text class="fonttitle">{{item.title}}</text>
					<view class="dis">
						<text class="fontcontent">{{item.msg}}</text>
					</view>
					<view class="block-right-bottom">
						<text class="date1">{{item.date}}</text>
						<text class="look">{{item.look}}</text>
					</view>
				</view>
			</view>
			<view class="blockin" :key='index' v-else>
				<view>
					<text class="fonttitle">{{item.title}}</text>
					<view class="dis">
						<text class="fontcontent">{{item.msg}}</text>
					</view>
					<view class="block-right-bottom">
						<text class="date2">{{item.date}}</text>
						<text class="look"  v-if="item.type1">{{item.look}}</text>
					</view>
				</view>
				<view class="block-left">
					<image class="PDF" :src="item.pic"></image>
				</view>
			</view>
		</view>

export default {
		data() {
			return {
				type:'2',
				TabCur: 0,
				scrollLeft: 0,
				PageCur: 'basics',
				tabList:[
					{name:'首页'},
					{name:'推荐'},
					{name:'热门'},
					{name:'本地'},
					{name:'最新'},
				],
				temper:[
					{
					  type:true,
					  color:true,
					  pic:'../../static/PDF.png',
					  title :'气象服务信息（2020年11月20日）',
					  msg:'11月22日至24日较强冷空气影响我区未来一周桂北多阴雨天气',
					  date:'2020-11-20:00:00',
					  look: '5浏览'
					},
					{
					  type:false,
					  type1:false,
					  color:true,
					  pic:'../../static/PDF.png',
					  title :'24小时实况要素统计',
					  msg:'最大雨量为宾阳桥东黎国家气象观测站为2.4毫米。最低气温为西林12.2℃。最高气温为平南32.1℃ ',
					  date:'2020-11-20:00:00',
					  look: '5浏览'
					},{
					  type:false,
					  type1:true,
					  color:true,
					  pic:'../../static/PDF.png',
					  title :'最新提示(20日19时更新)',
					  msg:'气象服务信息-20112076市县预警信号:大风1份(蓝1);20日19:00前1小时，极大风度最大值出现在',
					  date:'2020-11-20:00:00',
					  look: '2浏览'
					},{
					  type:true,
					  type1:true,
					  color:false,
					  pic:'../../static/PDF.png',
					  title :'广西202011201800短时预报6-12(3803期)',
					  msg:'预计2020年11月21日00时-11月21日06时，各地区无强对流天气',
					  date:'2020-11-20:00:00',
					  look: '1浏览'
					},{
					  type:true,
					  type1:true,
					  color:true,
					  pic:'../../static/PDF.png',
					  title :'广西202011201800短时预报0-6(3803期)',
					  msg:'预计2020年11月21日00时-11月21日06时，各地区无强对流天气',
					  date:'2020-11-20:00:00',
					  look: '3浏览'
					},{
					  type:true,
					  type1:true,
					  color:true,
					  pic:'../../static/PDF.png',
					  title :'南宁市-冬季农业专项气象服务',
					  msg:'11月22日至24日较强冷空气影响我区未来一周桂北多阴雨天气',
					  date:'2020-11-20:00:00',
					  look: '5浏览'
					}
				]
			};
		},

这样就可以实现，内容和样式的切换。因为v-if仅是可切换消失隐藏，如果需要更多的功能则可能需要这个