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

末蓝、 2021-09-23 15:28 365阅读 0赞

# 一、v-text指令 #

**v-text:以纯文本方式显示数据；**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70]

**事例代码：**

<div id="app">
    			<h2 v-text="message"></h2>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					message: "Hello Vue",
    					city: ["北京", "上海", "天津", "重庆"],
    				},
    			})
    		</script>

# 二、v-html指令 #

设置标签的innerHTML，如果是普通文本，和v-text的用法一样，如果是HTML结构会自动解析！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 1]

**事例代码：**

<div id="app">
    			<h2 v-html="message"></h2>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					message: "<a href='http://www.baidu.com'>百度</a>",
    					city: ["北京", "上海", "天津", "重庆"],
    				},
    			})
    		</script>

# 三、v-on：指令 #

为元素绑定事件，v-on:可以替换成@，功能是一样的！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 2]

**事例代码：**

<div id="app">
    			<button @click="sayHi">点击说Hi</button>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					message: "<a href='http://www.baidu.com'>百度</a>",
    					city: ["北京", "上海", "天津", "重庆"],
    				},
    				methods: { 
    					sayHi: function() { 
    						alert("吃了没?");
    					},
    				},
    			})
    		</script>

# 四、v-show指令 #

根据表达式值的真假来切换元素的显示和隐藏！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 3]

**事例代码：隐藏或者显示图片**

<div id="app">
            	<img v-show="show" src="img/03.jpg">
    			<button @click="changeImg">显示与隐藏</button>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					show：false,
    				},
    				methods: { 
    					changeImg: function() { 
    						this.show = !this.show;
    					},
    				},
    			})
    		</script>

# 五、v-if指令 #

根据表达式值的真假来切换元素的显示和隐藏(操作dom元素)！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 4]

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

<div id="app">
            	<h2 v-if="temp>=35">热死了!</h2>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({ 
    				el: '#app',
    				data: { 
    					temp: 50,
    				},
    				methods: { 
    					changeImg: function() { 
    						this.show = !this.show;
    					},
    				},
    			})
    		</script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70]: /images/20210923/df4db83f460745d39d0aa59a767b6891.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 1]: /images/20210923/21c6ff68ae414198952aab3f68c82e0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 2]: /images/20210923/5dc72300d3f64426a66a2f5f5ff23bf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 3]: /images/20210923/7990ad5776784267bbc1441a27aa7929.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjI5NTQz_size_16_color_FFFFFF_t_70 4]: /images/20210923/0485784ab1fe46b99c399e1019e91991.png