• vue模板语法上集

    目录

    一、插值

    1、 文本

              {{msg}}

     2 、html

              使用v-html指令用于输出html代码

    3、 属性

              HTML属性中的值应使用v-bind指令

    两种方式： 

    4 、表达式

              Vue提供了完全的JavaScript表达式支持         

     5、class绑定

      使用方式：v-bind:class="expression"

      expression的类型：字符串、数组、对象

    6 style绑定

      v-bind:style="expression"

      expression的类型：字符串、数组、对象

    二、指令

    v-if

    v-show        

    v-if和v-show的区别（面试题）

      v-for

    三、过滤器

    全局过滤器

    四、计算属性&监听器属性

       computed:{}

       watch:{}

    五、购物车案例

    一、插值

    1、 文本


              {{msg}}


     2 、html


              使用v-html指令用于输出html代码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 		<p>文本p>
    11. 		{{msg}}
    12. 		<p>html页面转义p>
    13. 		<div v-html="htmlstr">div>
    14. 		div>
    15. 	body>
    16. 	<script type="text/javascript">
    17. 		new Vue({
    18. 			el:'#app',
    19. 			data(){
    20. 				return {
    21. 					msg:'hello vue ~',
    22. 					htmlstr:'文本内容'
    23. 				}
    24. 			}
    25. 		})
    26. 	script>
    27. html>

    031b79e222b0493fa0068067b046fe7a.png

    3、 属性


              HTML属性中的值应使用v-bind指令

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 		<p>文本p>
    11. 		{{msg}}
    12. 		<p>html页面转义p>
    13. 		<div v-html="htmlstr">div>
    14. 		<p>v-bind 属性绑定p>
    15. 		<input value="值" />
    16. 		<input v-bind:value="valuestr" />
    17. 		<input :value="valuestr" />
    18. 		div>
    19. 	body>
    20. 	<script type="text/javascript">
    21. 		new Vue({
    22. 			el:'#app',
    23. 			data(){
    24. 				return {
    25. 					msg:'hello vue ~',
    26. 					htmlstr:'文本内容',
    27. 					valuestr:'vue值'
    28. 				}
    29. 			}
    30. 		})
    31. 	script>
    32. html>

    两种方式： 

    9c1ea3734d1940e39a91f1ebd4d88cd9.png

    运行：

    d7eecdd9763f4e59a190f3b74aad5fbd.png
     

    4 、表达式


              Vue提供了完全的JavaScript表达式支持
             

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 		<p>文本p>
    11. 		{{msg}}
    12. 		<p>html页面转义p>
    13. 		<div v-html="htmlstr">div>
    14. 		<p>v-bind 属性绑定p>
    15. 		<input value="值" />
    16. 		<input v-bind:value="valuestr" />
    17. 		<input :value="valuestr" /><br />
    18. 		
    19. 		<p>Vue中可以对变量进行二次处理p>
    20. 		{{str.substring(0,4)}}
    21. 		{{num +4}}<br />
    22. 		{{ok?'1':'0'}}<br />
    23. 		<span :id="idstr+'id'">书籍信息span>
    24. 		div>
    25. 	body>
    26. 	<script type="text/javascript">
    27. 		new Vue({
    28. 			el:'#app',
    29. 			data(){
    30. 				return {
    31. 					msg:'hello vue ~',
    32. 					htmlstr:'文本内容',
    33. 					valuestr:'vue值',
    34. 					str:'hello 杨总！',
    35. 					num:6,
    36. 					ok:false,
    37. 					idstr:'book_'
    38. 				}
    39. 			}
    40. 		})
    41. 	script>
    42. html>

     运行：89a8d81bfb9d4209a4ff5a511fa5624a.png

    306ec2f500454724bb5bb6811294d868.png

     5、class绑定

      使用方式：v-bind:class="expression"

      expression的类型：字符串、数组、对象

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 		
    8. 		<style>
    9. 			.a{
    10. 				color: palevioletred;
    11. 			}
    12. 			
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		<div id="app">
    17. 		<p>文本p>
    18. 		{{msg}}
    19. 		<p>html页面转义p>
    20. 		<div v-html="htmlstr">div>
    21. 		<p>v-bind 属性绑定p>
    22. 		<input value="值" />
    23. 		<input v-bind:value="valuestr" />
    24. 		<input :value="valuestr" /><br />
    25. 		
    26. 		<p>Vue中可以对变量进行二次处理p>
    27. 		{{str.substring(0,4)}}
    28. 		{{num +4}}<br />
    29. 		{{ok?'1':'0'}}<br />
    30. 		<span :id="idstr+'id'">书籍信息span>
    31. 		
    32. 		<p>class绑定p>
    33. 		<span :class="classStr">文本内容span>
    34. 		
    35. 		div>
    36. 	body>
    37. 	<script type="text/javascript">
    38. 		new Vue({
    39. 			el:'#app',
    40. 			data(){
    41. 				return {
    42. 					msg:'hello vue ~',
    43. 					htmlstr:'文本内容',
    44. 					valuestr:'vue值',
    45. 					str:'hello 杨总！',
    46. 					num:6,
    47. 					ok:false,
    48. 					idstr:'book_',
    49. 					classStr:'a'
    50. 				}
    51. 			}
    52. 		})
    53. 	script>
    54. html>

    运行：

    9fdb1e8a03634c4d914de24572e07f75.png

      

    6 style绑定

      v-bind:style="expression"

      expression的类型：字符串、数组、对象

    90dd14adb3fd4d4c9a10c2193d8280da.png

    eb7ffe8421d8477e8bbf838bb8b6b4ce.png


      

    二、指令

    指的是带有“v-”前缀的特殊属性
      
      .1 核心指令
              (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

              v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
                他们只能是兄弟元素
                v-else-if上一个兄弟元素必须是v-if
                v-else上一个兄弟元素必须是v-if或者是v-else-if

    v-if

    案例：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 		
    8. 		<style>
    9. 			.a{
    10. 				color: palevioletred;
    11. 			}
    12. 			
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		<div id="app">
    17. 			<p>v-ifp>
    18. 			
    19. 			请输入分数：<input v-model="score"/>
    20. 			对应的结果：
    21. 			<span v-if="score<60">不及格span>
    22. 			<span v-else-if="score<70">合格span>
    23. 			<span v-else-if="score<80">良span>
    24. 			<span v-else-if="score<90">优秀span>
    25. 			<span v-else-if="score<=100">优+span>
    26. 			<span v-else="">输入不合法！span>
    27. 		div>
    28. 	body>
    29. 	<script type="text/javascript">
    30. 		new Vue({
    31. 			el:'#app',
    32. 			data(){
    33. 				return {
    34. 					score:0
    35. 				}
    36. 			}
    37. 		})
    38. 	script>
    39. html>

     运行：

    fb05ddb221af413391e73732d6800007.png

     b5cab7796cc34c21a5f58428c8e9cfba.png

     cd64b76ba7f6454e8b073d435805a474.png

     fd454dcf5c844caba1fe951e780c9980.png

     fa1748b1264248f3ab3753cea08aef09.png

     1736dda1a06a4940a5c89799937de56a.png

    v-show        

      v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 		
    8. 		<style>
    9. 			.a{
    10. 				color: palevioletred;
    11. 			}
    12. 			
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		<div id="app">
    17. 			
    18. 			<p>v-showp>
    19. 			请输入结果：<input v-model="showflag"/>
    20. 			<span v-show="showflag">show:展示与否span>
    21. 			<span v-if="showflag">if:展示与否span>
    22. 		div>
    23. 	body>
    24. 	<script type="text/javascript">
    25. 		new Vue({
    26. 			el:'#app',
    27. 			data(){
    28. 				return {
    29. 					showflag:false
    30. 				}
    31. 			}
    32. 		})
    33. 	script>
    34. html>

    运行： 

    69c8380203ac483386d708a815e3ad42.png

    v-if和v-show的区别（面试题）

    v-show在展示里面能够形成html的字符串，通过display:none这个样式隐藏掉了这个标签

    v-if是不能的，其标签是直接没有了

      v-for

       v-for：类似JS的遍历，
                     遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
                     遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7.  
    8. 	
    9. 	head>
    10. 	<body>
    11. 		<div id="app">
    12. 			
    13. 			
    14. 			<p>v-forp>
    15. 			<select>
    16. 				<option  v-for="l in likes" :value="l.id">{{l.name}}option>
    17. 			select>
    18. 			<br />
    19. 			<div v-for="l in likes">
    20. 				<input type="checkbox" :value="l.id"/>{{l.name}}
    21. 			div>
    22. 			
    23. 		div>
    24. 	body>
    25. 	<script type="text/javascript">
    26. 		new Vue({
    27. 			el: '#app',
    28. 			data() {
    29. 				return {
    30. 				
    31. 					likes: [{
    32. 							id: 1,
    33. 							name: '唱歌'
    34. 						},
    35. 						{
    36. 							id: 2,
    37. 							name: '跳舞'
    38. 						},
    39. 						{
    40. 							id: 3,
    41. 							name: '乒乓球'
    42. 						},
    43. 						{
    44. 							id: 4,
    45. 							name: 'Breaking'
    46. 						}
    47. 					]
    48. 				}
    49. 			}
    50. 		})
    51. 	script>
    52. html>

    运行：

    f8fb578a441e4cc9ab8d5a36d6705c31.png

     b6c4c878d9264100a78902a75fa3a5d5.png

     
      

    三、过滤器

    全局过滤器

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7.  
    8. 		<style>
    9. 			.a {
    10. 				color: palevioletred;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			
    17. 			
    18. 			{{msg|strSplit|strSplit2}}
    19. 			
    20. 		div>
    21. 	body>
    22. 	<script type="text/javascript">
    23. 		Vue.filter('strSplit',function(value){
    24. 			console.log(value);
    25. 			return value.substring(0,5);
    26. 		})
    27. 		Vue.filter('strSplit2',function(value){
    28. 			console.log(value);
    29. 			return value.substring(0,5);
    30. 		})
    31. 		new Vue({
    32. 			el: '#app',
    33. 			data() {
    34. 				return {
    35. 					msg:'hello 杨总 ~'
    36. 				}
    37. 			}
    38. 		})
    39. 	script>
    40. html>

    fdba3d13035743839c871cb991eae956.png

     d45563062e6a479fb9f73d40e17839e1.png

     运行：

    4ffccf1d8e1d4e5cb35493e1d4839bff.png

    四、计算属性&监听器属性

    计算属性

       计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

       computed:{}

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7.  
    8. 		<style>
    9. 			.a {
    10. 				color: palevioletred;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			<p计算属性>p>
    17. 			请输入第一个数：<input v-model="x"/><br />
    18. 			请输入第二个数：<input v-model="y"/><br />
    19. 			结果为：{{addFlag}}
    20. 		div>
    21. 	body>
    22. 	<script type="text/javascript">
    23. 		
    24. 		new Vue({
    25. 			el: '#app',
    26. 			data() {
    27. 				return {
    28. 					x:0,
    29. 					y:0
    30. 				}
    31. 			},computed:{
    32. 				// 计算属性
    33. 				addFlag:function(){
    34. 					return parseInt(this.x)+parseInt(this.y);
    35. 				}
    36. 			}
    37. 		})
    38. 	script>
    39. html>

       运行：

    90f8902a653a40e8a0909c625f2ed943.png

    监听属性

       监听属性 watch，我们可以通过 watch 来响应数据的变化

       watch:{}

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7.  
    8. 		<style>
    9. 			.a {
    10. 				color: palevioletred;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			<p>计算属性p>
    17. 			请输入第一个数：<input v-model="x"/><br />
    18. 			请输入第二个数：<input v-model="y"/><br />
    19. 			结果为：{{addFlag}}
    20. 			<p>监听器属性p>
    21. 			请输入第一个数：<input v-model="km"/><br />
    22. 			请输入第二个数：<input v-model="m"/><br />
    23. 			
    24. 		div>
    25. 	body>
    26. 	<script type="text/javascript">
    27. 		
    28. 		new Vue({
    29. 			el: '#app',
    30. 			data() {
    31. 				return {
    32. 					x:0,
    33. 					y:0,
    34. 					km:0,
    35. 					m:0
    36. 				}
    37. 			},computed:{
    38. 				// 计算属性
    39. 				addFlag:function(){
    40. 					return parseInt(this.x)+parseInt(this.y);
    41. 				}
    42. 			},
    43. 			watch:{
    44. 				km:function(v){
    45. 					// :之前对应的是被监听的属性，v指的是被监听的属性的值
    46. 					// 当v对应的值发生变化的时候，会执行这个方法
    47. 					// v代表千米
    48. 					this.m=parseInt(v)*1000
    49. 				},
    50. 				m:function(v){
    51. 					this.km=parseInt(v)/1000;
    52. 				}
    53. 			}
    54. 		})
    55. 	script>
    56. html>

     运行：

     98ca73803edc4546a4510259d6000f83.png

    五、购物车案例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7.  
    8. 		
    9. 	head>
    10. 	<body>
    11. 		<div id="app">
    12. 			
    13. 			
    14. 			<p>购物车p>
    15. 			<table border="1px">
    16. 				<tr>
    17. 					<td>物品td>
    18. 					<td>单价td>
    19. 					<td>数量td>
    20. 					<td>小计td>
    21. 				tr>
    22. 				<tr>
    23. 					<td>帽子td>
    24. 					<td>{{maoziDanjia}}td>
    25. 					<td>
    26. 						<input v-model="maoziShuliang"/>
    27. 					td>
    28. 					<td>{{maoziXiaoji}}td>
    29. 				tr>
    30. 				<tr>
    31. 					<td>衣服td>
    32. 					<td>{{yifuDanjia}}td>
    33. 					<td>
    34. 						<input v-model="yifuShuliang"/>
    35. 					td>
    36. 					<td>{{yifuXiaoji}}td>
    37. 				tr>
    38. 				<tr>
    39. 					<td>裙子td>
    40. 					<td>{{qunziDanjia}}td>
    41. 					<td>
    42. 						<input v-model="qunziShuliang"/>
    43. 					td>
    44. 					<td>{{qunziXiaoji}}td>
    45. 				tr>
    46. 				<tr>
    47. 					<td>总价td>
    48. 					<td colspan="3">
    49. 						{{zongJia}}
    50. 					td>
    51. 					
    52. 				tr>
    53. 				
    54. 			table>
    55. 		div>
    56. 	body>
    57. 	<script type="text/javascript">
    58. 		
    59. 		new Vue({
    60. 			el: '#app',
    61. 			data() {
    62. 				return {
    63. 					
    64. 					maoziDanjia:20,
    65. 					yifuDanjia:299,
    66. 					qunziDanjia:462,
    67. 					maoziShuliang:1,
    68. 					yifuShuliang:1,
    69. 					qunziShuliang:1
    70. 				}
    71. 			},computed:{
    72. 				// 计算属性
    73. 				
    74. 				// 因为数量 会影响小计，小计不会影响数量，所以使用计算属性
    75. 				maoziXiaoji:function(){
    76. 					return parseInt(this.maoziDanjia)*parseInt(this.maoziShuliang); 
    77. 				},
    78. 				yifuXiaoji:function(){
    79. 					return parseInt(this.yifuDanjia)*parseInt(this.yifuShuliang); 
    80. 				},
    81. 				qunziXiaoji:function(){
    82. 					return parseInt(this.qunziDanjia)*parseInt(this.qunziShuliang); 
    83. 				},
    84. 				zongJia:function(){
    85. 					return parseInt(this.yifuXiaoji)+parseInt(this.maoziXiaoji)+parseInt(this.qunziXiaoji);
    86. 				}
    87. 			},
    88. 			watch:{
    89. 				km:function(v){
    90. 					// :之前对应的是被监听的属性，v指的是被监听的属性的值
    91. 					// 当v对应的值发生变化的时候，会执行这个方法
    92. 					// v代表千米
    93. 					this.m=parseInt(v)*1000
    94. 				},
    95. 				m:function(v){
    96. 					this.km=parseInt(v)/1000;
    97. 				}
    98. 			}
    99. 		})
    100. 	script>
    101. html>

    运行： 

  • 相关阅读:
    7种系统设计中的数据库范式
    企业电子招标采购系统源码Spring Boot + Mybatis + Redis + Layui + 前后端分离 构建企业电子招采平台之立项流程图
    图论基础（python蓝桥杯）
    网络基础（一）
    初识JVM
    spring学习小笔记
    企业申请车辆前雾灯E-mark认证的前提条件
    批量重命名与翻译文件技巧大揭秘
    Promise面试题
    Gateway 整合 Sentinel 实现网关限流
  • 原文地址：https://blog.csdn.net/weixin_65808248/article/details/126652414