当前博客：选择器的讲解:5.属性选择器

211 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：前端看我

属性选择器是在H5中新增的选择器,属性选择器利用中括号进行表示

我们之间来看各种属性选择器的使用方法示例及效果

<!文档类型 网页类型>
<网页 语言代码="中文">
	<网页头部>
		<网页信息 文档编码="UTF8" />
		<网页信息 名称="页面视图" 关联数据="视图宽度=填充视图宽度,初始缩放值=1,最大缩放值=1,用户缩放状态=假" />
		<网页信息 关联HTTP="兼容模式" 关联数据="最高IE版本" />
		<网页标题>选择器的讲解</网页标题>
		<样式>
		  区块[v-if]{
		      文本颜色: 颜色值-橙色;
		  }
		  区块[v-if="二号盒子"]{
		      文本颜色: 颜色值-红色;
		  }
		  区块[v-show^='握紧']{
		      文本颜色: 颜色值-绿色;
		  }
		  区块[v-show$='前端']{
		      文本颜色: 颜色值-桃色;
		  }
		  区块[v-show*='fof']{
		      文本颜色: 颜色值-紫色;
		  }

		</样式>
	</网页头部>
	<网页主体>
		<!--这里编写网页代码-->
		<区块 v-if>带有v-if的</区块>
		<区块 v-if="二号盒子">带有v-if的且v-if="二号盒子"的</区块>
		<区块 v-show="握紧一棵草">带有v-show且以握紧开头的</区块>
		<区块 v-show="学习前端">带有v-show且以前端结尾的</区块>
		<区块 v-show="这个fof真不错">带有v-show且属性中包含fof的</区块>
	</网页主体>
</网页>