Vue.js------Vue基本指令(三)

- 日理万妓 2021-09-23 15:30 365阅读 0赞

# 一、v-bind指令 #

设置元素的属性(src,title,class)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70]

**事例代码：根据表达式的值来判断元素的显示和隐藏**

<div id="app">
            	<img src="imgsrc" title="imgtitle">
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					imgsrc: "img/03.png",
    					imgtitle: "Mylogo",
    				},
    			})
    		</script>

# 二、v-for指令 #

根据数据生成列表结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 1]  
**事例代码：根据表达式的值来判断元素的显示和隐藏**

<div id="app">
            	<ul>
    				<li v-for="(item,index) in city">
    					{ { index+1}} 直辖市 { { item}}
    				</li>
    			</ul>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					city: ["北京", "上海", "天津", "重庆"],
    				},
    			})
    		</script>

运行截图  
![在这里插入图片描述][20200107102013398.png]

# 三、v-on:补充：@keyup.(enter、shift…)事件修饰符 #

根据数据生成列表结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 2]  
**事例代码：根据表达式的值来判断元素的显示和隐藏**

<div id="app">
            	<input type="text" @keyup.enter="sayHi">
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					city: ["北京", "上海", "天津", "重庆"],
    				},
    				methods: { 
    					sayHi: function() { 
    						alert("Hi~");
    					},
    				},
    			})
    		</script>

运行截图  
![在这里插入图片描述][20200107102817430.png]

# 四、v-model指令 #

获取和设置表单元素的值双向数据绑定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 4]  
**事例代码：根据表达式的值来判断元素的显示和隐藏**

<div id="app">
            	<input type="text" v-model="message">
    			<h2>{ { message}}</h2>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					message: "Hello Vue!!!",
    				},
    				methods: { 
    					sayHi: function() { 
    						alert("Hi~");
    					},
    				},
    			})
    		</script>

运行截图  
![在这里插入图片描述][20200107103602147.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70]: /images/20210923/54ce8a46aa5c4824a6c5b9ce717d50e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 1]: /images/20210923/e7edc36c6ff74b99905ade801bfe26f7.png
[20200107102013398.png]: /images/20210923/f36e331056044eacbb2327a4f69c6510.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 2]: /images/20210923/fcb572cd84cc430f92115c37273179e9.png
[20200107102817430.png]: /images/20210923/cbe25dbf0882490f9f0fe6272ceac6a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 3]: /images/20210923/d66aa58136184895b94b765471004d9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 4]: /images/20210923/6571ae9c01a746999eacd5a5c564a9ef.png
[20200107103602147.png]: /images/20210923/9ed03003aced437e9adc27c1a8e30710.png