熟悉及使用常用指令

最新推荐文章于 2022-02-24 23:23:10 发布

Mr.ZKH

最新推荐文章于 2022-02-24 23:23:10 发布

阅读量177

点赞数

分类专栏： Vuejs

本文链接：https://blog.csdn.net/weixin_44415461/article/details/97658113

版权

Vuejs 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

什么是指令
在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。
譬如在HTML页面中这样使用<div v-xxx=''></div> 在vue中v-xxx就是vue的指令
指令就是以数据去驱动DOM行为的,简化DOM操作
常用的指令有哪些，及怎么使用这些指令 v-text 不可解析html标签
v-html 可解析html标签
v-if 做元素的插入（append）和移除（remove）操作
v-else-if
v-else
v-show display:none 和display：block的切换
v-for
数组 item，index
对象 value，key ，index

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script type="text/javascript">
	new Vue({
		el:'#app',
		template:`
			<div>
				<!--测试v-text-->
				<div v-text="mytext"></div>
				<hr/>

				<!--测试v-html-->
				<div v-html="myhtml"></div>
                <hr/>

                <!--测试v-if  v-else-if  v-else-->
                <button v-if="num==1">测试v-if</button>
                <button v-else-if="num==2">测试v-else-if</button>
                <button v-else>测试v-else</button>
                <hr/>

                <!--测试v-show-->
                <div v-show="checkShow">测试v-show</div>
                <hr/>

                <!--循环数组-->
                <ul>
                	<li v-for="(item , index) in arrayfor">
                        {{item}}--{{index}}
                	</li>
                </ul>
                <hr/>

                <!--循环对象-->
                <ul>
                	<li v-for="(val , key) in ojfor">
                    	{{key}}--{{val}}
                	</li>
                </ul>
			</div>
			`,
		data:function(){
             return {
                mytext:'<h1>我这里是v-text</h1>',
                myhtml:'<h1>我这里是v-html</h1>',
                num:6,
                checkShow:true,  //false
                arrayfor:['足球','篮球','羽毛球'],
                ojfor:{name:'张三',height:'180',age:'24'}
             }
		}
	})
</script>
</html>

运行效果图:
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
熟悉及使用常用指令

什么是指令在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。譬如在HTML页面中这样使用<div v-xxx=''></div> 在vue中v-xxx就是vue的指令指令就是以数据去驱动DOM行为的,简化DOM操作常用的指令有哪些，及怎么使用这些指令 v-text 不可解析html标签v-html 可解析html标签v-if 做元素的插入（...
复制链接

扫一扫

专栏目录