• Vue模板语法

    昨天与大家分享了Vue入门，今天继续与大家分享关于部分Vue模板语法

    目录

    一、Vue插值

    二、Vue指令 

    三、过滤器

     四、计算器&&监听器

    1、运用计算器原理实现购物车

     2、运用监听器实现米和千米单位换算

    一、Vue插值

    Vue插值中主要包括以下几个方法的应用

       1.1.1 文本

              {{msg}}

        1.1.2 html

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

        1.1.3 属性

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

        1.1.4 表达式

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

              {{str.substr(0,6).toUpperCase()}}

              {{ number + 1 }}

              {{ ok ? 'YES' : 'NO' }}

              

  • 我的Id是js动态生成的

    • 1.1.5 class绑定

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

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

      

    1.1.6 style绑定

      v-bind:style="expression"

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

    html代码演示：

    1. <!DOCTYPE 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. 			
    7. 		<title></title>
    8. 		<style>
    9. 			
    10. 			.a{
    11. 				color :yellow;
    12. 			}
    13. 		</style>
    14. 	</head>
    15. 	<body>
    16. 				<div id="app">
    17. 					<p>文本</p>
    18. 					{{msg}}
    19. 					<p>htmlstr串</p>
    20. 					<div v-html="htmlstr"></div>
    21. 					<p>v-bind 属性绑定</p>
    22. 					<input v-bind:value="valuestr"/>
    23. 					<input :value="valuestr">
    24. 					<p>表达式</p>
    25. 					{{str.substring(0,4).toUpperCase()}}
    26. 					小朱:{{number+1}}
    27. 					{{ok?'1':'0'}}
    28. 					<span :id="idstr+'id'"></span>
    29. 					<p>class绑定</p>
    30. 						<span class="classStr">文本内容</span>
    31. 					<p>style绑定</p>	
    32. 					<span style="classStr">文本内容</span>
    33. 										
    34. 				</div>
    35. 				
    36. 				<script type="text/javascript">
    37. 					
    38. 					
    39. 					new Vue({
    40. 						el:'#app',
    41. 						data(){
    42. 							
    43. 							return {
    44. 								msg:"hello vue!!!",
    45. 							    htmlstr:'
      小猪
      '      ,
    46. 								valuestr:'小猪小猪胖乎乎',
    47. 								str:'吃完睡觉呼噜噜',
    48. 								number:66,
    49. 								ok:false,
    50. 								idstr:'list_',
    51. 								classStr:'a',
    52. 							}
    53. 						}
    54. 					})
    55. 					
    56. 				</script>
    57. 	</body>
    58. </html>

    运行效果：

     

    二、Vue指令 

      指的是带有“v-”前缀的特殊属性

    核心指令

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

      v-for：类似JS的遍历，

     遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

     遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

      v-bind

      v-on

      v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   

    v-for/v-model一起绑定[多选]复选框和单选框  

    html代码演示：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    7.  
    8. 	</head>
    9. 	<body>
    10. 		<div id="app">
    11. 			<p>v-if的使用</p>
    12. 			请输入分数:<input v-model="score" />
    13.  
    14. 			<span v-if="score<60">不及格</span>
    15. 			<div v-else-if="score<70">合格</div>
    16. 			<span v-else-if="score<80">良好</span>
    17. 			<span v-else-if="score<90">优秀</span>
    18. 			<span v-else-if="score<=100">优+</span>
    19. 			<span v-else="">输入不合法</span>
    20.  
    21.  
    22. 			<p>v-show</p>
    23. 			请输入结果：<input v-model="showflag">
    24. 			<span v-show="showflag">show：展示与否</span>
    25. 			<span v-if="showflag">if：展示与否</span>
    26.  
    27. 			<p>v-for</p>
    28. 			<select>
    29. 				<option v-for="l in likes" :value="l.id">{{l.name}}</option>
    30.  
    31. 			</select>
    32. 			<br>
    33.  
    34. 			<div v-for="l in likes">
    35.  
    36. 				<input type="checkboox" :value="l.id" /> {{l.name}}
    37. 			</div>
    38. 		</div>
    39.  
    40.  
    41. 	</body>
    42. 	<script type="text/javascript">
    43. 		new Vue({
    44.  
    45.  
    46. 			el: '#app',
    47. 			data() {
    48. 				return {
    49. 					score: 20,
    50. 					showflag: false,
    51. 					likes[{
    52. 						id = 1,
    53. 						name = "跳舞"
    54. 					}, {
    55. 						id = 2,
    56. 						name = "sing"
    57. 					}, {
    58. 						id = 3,
    59. 						name = "baskestball"
    60. 					}, {
    61. 						id = 4,
    62. 						name = "football"
    63. 					}, ]
    64. 				}
    65.  
    66.  
    67. 			}
    68. 		})
    69. 	</script>
    70. </html>

    三、过滤器

    过滤器

    全局过滤器

    Vue.filter('filterName', function (value) {

     // value 表示要过滤的内容

    });

    局部过滤器

    new Vue({

     filters:{'filterName':function(value){}}

    });

    vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

    {{ name | capitalize }}

    注1：过滤器函数接受表达式的值作为第一个参数

    注2：过滤器可以串联     

    {{ message | filterA | filterB }}

    注3：过滤器是JavaScript函数，因此可以接受参数：

    {{ message | filterA('arg1', arg2) }}

    html代码演示：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 		{{msg|all}},{{msg|all1}},{{msg|all|all1}},{{msg|all2(4,5)}}
    12. 		</div>
    13. 		
    14. 		<script type="text/javascript">
    15. 				Vue.filter('all', function(value) {
    16. 						return value.substring(1, 4);
    17. 					});
    18. 					
    19. 					
    20. 			
    21. 			new Vue({
    22. 		
    23. 		
    24. 				el: '#app',
    25. 				data() {
    26. 					return {
    27. 						msg:'小朱天天开心发大财'
    28. 				}
    29. 			}
    30. 			
    31. 			
    32. 			filters:{
    33. 						'all1':function(val){
    34. 							return val.substring(2,3);
    35. 						},
    36. 						'all2':function(val,start,end){
    37. 							return val.substring(start,end);
    38. 						}
    39. 					}
    40. 						
    41. 		})
    42. 	</script>	
    43. 	</body>
    44. 	
    45. 	
    46. </html>

     四、计算器&&监听器

    1、运用计算器原理实现购物车

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

       computed:{}

    1.  
    2. 		<div id="app">
    3. 			
    4. 				<p>计算属性</p>
    5. 						<table border="1" style="width: 600px;height: 300px;">
    6. 							<tr>
    7. 								<td>物品</td>
    8. 								<td>单价</td>
    9. 								<td>
    10. 									数量
    11. 								</td>
    12. 								<td>
    13. 									小计
    14. 								</td>
    15. 							</tr>
    16. 							<tr>
    17. 								<td>帽子</td>
    18. 								<td>{{maoziDanjia}}</td>
    19. 								<td>
    20. 									<input v-model="maozi" />
    21. 								</td>
    22. 								<td>
    23. 									{{maoziTotal}}
    24. 								</td>
    25. 							</tr>
    26. 							<tr>
    27. 								<td>衣服</td>
    28. 								<td>{{yifuDanjia}}</td>
    29. 								<td>
    30. 									<input v-model="yifu" />
    31. 								</td>
    32. 								<td>
    33. 									{{yifuTotal}}
    34. 								</td>
    35. 							</tr>
    36. 							<tr>
    37. 								<td>裤子</td>
    38. 								<td>{{kuziDanjia}}</td>
    39. 								<td>
    40. 									<input v-model="kuzi" />
    41. 								</td>
    42. 								<td>
    43. 									{{kuziTotal}}
    44. 								</td>
    45. 							</tr>
    46. 							<tr>
    47. 								<td>总价</td>
    48. 								<td colspan="3">{{total}}</td>
    49. 							</tr>
    50. 					</table>
    51. 					
    52. 					
    53. 		</div>
    54. 			<script type="text/javascript">
    55. 				new Vue({
    56. 					
    57. 			
    58. 					el:"#app",
    59. 					data(){
    60. 						
    61. 						return{
    62. 							maoziDanjia:10,
    63. 							yifuDanjia:30,
    64. 							kuziDanjia:20,
    65. 							maozi:1,
    66. 							yifu:1,
    67. 							kuzi:1,
    68. 							
    69. 						};
    70. 						
    71. 					},
    72. 					
    73. 					computed:{
    74. 									maoziTotal(){
    75. 										return this.maoziDanjia*this.maozi;
    76. 									},
    77. 									yifuTotal(){
    78. 										return this.yifuDanjia*this.yifu;
    79. 									},
    80. 									kuziTotal(){
    81. 										return this.kuziDanjia*this.kuzi;
    82. 									},
    83. 									total(){
    84. 										return this.maoziTotal+this.yifuTotal+this.kuziTotal;
    85. 									}
    86. 								},
    87. 		）}

     效果演示：

     2、运用监听器实现米和千米单位换算

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

       watch:{}

    1. 	
    2. 		<div id="app">
    3. 			
    4. 			
    5. 					
    6. 						<p>监听属性</p>
    7. 								千米：<input v-model="km" />
    8. 								米：<input v-model="m" />
    9. 		</div>
    10.  
    11.  
    12.  
    13.  
    14.  
    15.  
    16.  
    17.  
    18. 			<script type="text/javascript">
    19. 				new Vue({
    20. 					
    21. 			
    22. 					el:"#app",
    23. 					data(){
    24. 						
    25. 						return{
    26. 							maoziDanjia:10,
    27. 						
    28. 							km:2,
    29. 							m:2000
    30. 						};
    31. 						
    32. 					},
    33.  
    34. watch:{
    35. 									// v指的是m变量
    36. 									m: function(v){
    37. 										this.km = parseInt(v)/1000;
    38. 									},
    39. 									// v指的是km变量
    40. 									km: function(v){
    41. 										this.m = parseInt(v)*1000;
    42. 									}
    43. 								
    44. 					}	
    45. 			
    46. 					})

    运行效果：

     

  • 相关阅读:
    18 【移动Web开发之流式布局】
    4、Netty 线程模型
    2023年软考时间流程安排：
    C++ 四种类型转换
    后疫情时代，云计算如何为在线教育保驾护航
    TRex学习之旅四
    华为云云耀云服务器L实例评测｜华为云上安装kafka
    05-jQuery的ajax
    Explore EP9442 HDMI 1.4 矩阵芯片
    【事务】- mysql事务和neo4j事务冲突导致mysql事务不生效
  • 原文地址：https://blog.csdn.net/m0_67477525/article/details/126669610