• vue模板语法上集-＞插值，指令，过滤器，计算属性&监听属性，vue购物车

    • 插值
    • 指令
    • 过滤器
    • 计算属性&监听属性
    • vue购物车

    1.插值

    3. 	
    4. 		"utf-8">
    5. 		
    6. 		
    7. 		插值
    8. 		
    9. 	
    10. 	
    11. 		
      "app">
    12. 			
      文本
    13. 			{{msg}}
    14. 			
      html解析
    15. 			
      字体颜色变黄
    16. 			"msg2">
    17. 			
      字体变黄变大
    18. 			"msg3" v-html="msg2">
    19. 			
      表达式
    20. 			{{num+1}}
    21. 			{{warn.substr(0,2)}}
    22. 			"ok"/>
    23. 			{{ok==1?'被抓了':'有内鬼'}}
    24. 		

    3. 	
    4. 		"utf-8">
    5. 		
    6. 		
    7. 		指令
    8. 	
    9. 	
    10. 		
      "app">
    11. 			
      v-if/v-else-if/v-else
    12. 			"score"/>
    13. 			if="score<60">不及格
    14. 			else-if="score>=60 && score<70">及格
    15. 			else-if="score>=70 && score<80">一般
    16. 			else-if="score>=80 && score<90">良好
    17. 			else="">优秀
    18. 			60以下 不及格
    19. 			60-70 及格
    20. 			70-80 一般
    21. 			80-90 良好
    22. 			90-100 优秀
    23. 			
    24. 			
      v-show
    25. 			v-if与v-show的区别
    26. 			if="isShow">展示
    27. 			"isShow">展示
    28. 			
    29. 			
      v-for
    30. 			for="a in arr">{{a}}  
    31. 			for="i,u in users">  {{i}}
    32. 			
    33. 			
      "" v-for="h in hobby"    	>
    34. 				"checkbox" name="hobby"  :value="h.id" />{{h.name}}
    35.

    •  

     3.过滤器

    3. 	
    4. 		"utf-8">
    5. 		
    6. 		
    7. 		
    8. 		过滤
    9. 	
    10. 	
    11. 		
      "app">
    12. 			
      局部过滤器基本应用
    13. 			{{msg}}
    14. 			{{msg | filterA}}
    15. 			
      局部过滤器串行使用
    16. 			{{msg}}
    17. 			{{msg | filterA | filterB}}
    18. 			
      局部过滤器传参
    19. 			{{msg | filterC(3,10)}}
    20. 			
      全局过滤器
    21. 			{{time}}
    22. 			{{time | fmtDateFilter}}
    23.

    • 4.计算属性&监听属性

    3. 	
    4. 		"utf-8">
    5. 		
    6. 		
    7. 		计算属性监听属性
    8. 		
    9. 		
    10. 	
    11. 	
    12. 		
      "app">
    13. 			
      计算属性
    14. 			单价:"price"/>
    15. 			数量:"num"/>
    16. 			小计:{{count}}
    17. 			
    18. 			
      监听属性
    19. 			千米:"km"/>
    20. 			米:"m"/>
    21. 		
    22. 		
    23. 		
    24.

    5.vue购物车

    3. 	
    4. 		"utf-8">
    5. 		
    6. 		vue购物车
    7. 		
    8. 	
    9. 	
    10. 		
      "app">
    11. 			
      if="cart.length==0">
    12. 				
      购物车为空
    13. 			
    14. 			
    15. 			
      else v-for="st,xb in cart" :key="xb">
    16. 				
      名称：{{st.name}}
      				
    17. 				
      价格：{{st.price}}
    18. 				
      数量：{{st.num}}
    19. 				
      单价：{{st.price * st.num}}
    20. 				
    21. 				{{st.num}}
    22. 			    
    23. 				
    24. 			
    25. 		
    26. 		
    27.

  • 相关阅读:
    Kubernetes(七)修改 pod 网络(flannel 插件)
    Git基础使用
    Running “flutter pub get“ in xxx... 报错: Git error 443
    Web3——开发第一个智能合约
    Java基础
    【JVM】并发可达性分析-三色标记算法
    React18入门（第四篇）——React中的4种CSS使用方式，CSS Module、CSS-in-Js详解
    谦卑篇（Be humble）//伟大是用卑微来换取的,任何时候都应该看清自己
    华为云服务器安装Linux并实现本地连接访问
    pjudge#21651-[PR #4]猜猜看【交互】
  • 原文地址：https://blog.csdn.net/weixin_73471776/article/details/132997891