Vue学习笔记：第2节--Vue对html指令的扩展

快来打我* 2021-10-14 05:33 264阅读 0赞

**内容概要：**

*  v-for遍历数组、对象、对象数组
 *  v-on指令，绑定html事件 PS：v-bind为绑定html属性，@为简洁写法，如@click为绑定鼠标事件
 *  v-show，隐藏显示内容，及其v-show表达式写法
 *  v-if，v-if-else,v-else判断条件
 *  v-if，三目表达式

--------------------

IDE：HBuilder 9.1.29.201811231920 工程源码：https://github.com/leezhou999/learningVue.git

--------------------

**效果：**（包含一个html文件）  
![在这里插入图片描述][20190819113025639.gif]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script>
    			window.onload=function(){
    				new Vue({
    					el:'#root',
    					data:{//vue实例对应的html变量范围
    						msg:'hello v-for',
    						age:19,
    						flag:true,
    						arr:['aa','bb','cc'],
    						obj:{name:'jerry',age:18},
    						lists:[
    						{name:'aaa',id:111},
    						{name:'bbb',id:222},
    						{name:'ccc',id:333},
    						]
    					},
    					methods:{
    						
    					click1:function(){
    					this.age=18;
    					},
    					/*mouseover(){
    						this.age=21;
    					},*/
    					mouseover:function(){
    						this.age=20;
    					},
    					mouseout:function(){
    						this.age=23;
    					},
    					dbclick:function(){
    						this.age=2233;
    					},
    					}
    				})
    			}
    		</script>
    	</head>
    	<body>
    		<div id="root">
    			
    			<div>{
       {msg}}--{
       {age}}</div>
    			<ul>
    				<li v-for="(value,index) in arr">{
       {value}}--{
       {index}}</li>
    				
    				<li v-for="(value,index) in obj">{
       {value}}--{
       {index}}</li>
    				
    				<li v-for="(value,index) in lists">{
       {value}}--{
       {index}}</li>
    				
    			</ul>
    			
    			<button v-on:click="click1">click1</button>
    			
    			<button v-on:mouseover="mouseover">mouseover</button>
    			
    			<button v-on:mouseout="mouseout">mouseout</button>
    			
    			<button @dblclick="dbclick">dbclick</button>
    			
    			<button v-show="flag">是否显示</button>
    			
    			<button v-show="age==18">是否显示，年龄为18时显示</button>
    			
    			<p v-if="age==18">18</p>
    			<p v-else-if="age==20">20</p>
    			<p v-else="not">not</p>
    			
    			<p v-if="flag?msg='hello':msg='hello vue'">{
       {msg}}</p>
    		</div>
    	</body>
    </html>

**回顾：**

*  js基础类型有哪些？  
    ANS: 字符串值，数值，布尔值，数组，对象  
    https://www.w3school.com.cn/js/js\_datatypes.asp

> 后记：以上为个人学习笔记，希望能对各位读者有所帮助。若您发现文中不恰当、错误之处，敬请提出。

[20190819113025639.gif]: /images/20211013/e0119c8f6c95480981950589686b761b.png