• Vue模板语法上集（02）

    今日份分享内容：

    一、插值（该代码块会放在末尾一并展示）

    1、文本插值

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

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

     4、表达式

      5、class 样式绑定

    二、指令

    1、 v-if

    2、 v-show

     3、v-for：类似JS的遍历  

     三、过滤器

    .filter

    四、计算属性与监听器

    1、计算属性  computed:{}

    2、监听属性 watch：{}

     五、购物车案例

    一、插值（该代码块会放在末尾一并展示）

    1、文本插值

    {{msg}} 

    效果展示：

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

     

     所以需要添加v-html属性：

            

     运行效果展示：

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

     三种属性绑定值：

    value        直接输出值

    v-bind:value        引用定义的变量值

    :value                引用定义的变量值

    任意属性都可以引用定义的变量值 

     运行效果展示：

     4、表达式

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

    截取字段： substring

    数值增加：+

    三元运算符： ？_：_

    字符串拼接： +

    如图所示：

    效果展示：

      5、class 样式绑定

    有两种方式：

    ①使用id标签（.）/ 类标签（#）

    效果展示：

     ②调用 定义的变量值

     这里注意的是，我们引用的自定义变量的值也是从前面定义的id标签里来的！

     效果展示：

     6、style绑定

    ：style 

     效果展示：

    代码块展示：

    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>1、插值title>
    7. 		<style>
    8. 			.a{
    9. 				color: yellow;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		
    15. 		<div id="app">
    16. 			<p>文本插值p>
    17. 			{{msg}}<br/>
    18. 			<p>html页面转义p>
    19. 			<div v-html="htmlstr">div><br/>
    20. 			<p>v-bind 属性绑定p>
    21. 			<input value="值" /><br/>
    22. 			<input v-bind:value="aa" /><br/>
    23. 			<input :value="aa" />
    24. 			<p>vue中可以对变量进行二次处理（也可使用js语法）p>
    25. 			{{bb.substring(0,4)}}<br />
    26. 			{{cc + 4}}<br />
    27. 			{{dd ? '1':'0'}}<br />
    28. 			<span :id="ee + '1' ">书籍信息span>
    29. 			<p>class样式绑定p>
    30. 			<span class="a">我是一杯咖啡span>
    31. 			<span :class="ff">我是一杯咖啡span>
    32. 			<span :style="gg" >我是红色的咖啡span>
    33. 		div>
    34. 	body>
    35. 	<script type="text/jscript">
    36. 		/* 实例化一个vue */
    37. 		new Vue({
    38. 			el:"#app",
    39. 			data(){
    40. 				return{
    41. 					msg:"hello vue! 我是一杯咖啡",
    42. 					htmlstr:'文本内容',
    43. 					aa:'我是aa',
    44. 					bb:'hello world',
    45. 					cc:6,
    46. 					dd:false,
    47. 					ee:'book_',
    48. 					ff:'a',
    49. 					gg:'color:red;'
    50. 				}
    51. 			}
    52. 		})
    53. 	script>
    54. html>

    二、指令

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

    1、 v-if

    v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素,

    他们只能是兄弟元素

    v-else-if上一个兄弟元素必须是v-if

    v-else上一个兄弟元素必须是v-if或者是v-else-if

     效果展示：

     

    2、 v-show

    面试题：

            v-show与v-if的区别？

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

     

     3、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>1、插值title>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			<p>v-ifp>
    12. 			
    13. 			请输入分数：<input v-model="score" />
    14. 			对应的结果：
    15. 			<span v-if="score<60">不及格span>
    16. 			<span v-else-if="score<70">合格span>
    17. 			<span v-else-if="score<80">良span>
    18. 			<span v-else-if="score<90">优秀span>
    19. 			<span v-else-if="score<=100">优+span>
    20. 			<span v-else="">输入不合法span>
    21. 			<p>v-showp>
    22. 			请输入结果：<input v-model="showflag" />
    23. 			<span v-show="showflag">show：展示与否span>
    24. 			<p>v-forp>
    25. 			<select>
    26. 				<option  v-for="l in likes" :value="l.id">{{l.name}}option>
    27. 			select><br />
    28. 			<div  v-for="l in likes" >
    29. 				<input type="checkbox" :value="l.id">{{l.name}}
    30. 			div>
    31. 		div>
    32. 	body>
    33. 	body>
    34. 	<script type="text/jscript">
    35. 		/* 实例化一个vue */
    36. 		new Vue({
    37. 			el:"#app",
    38. 			data(){
    39. 				return{
    40. 					score:0,
    41. 					showflag:false,/* 默认值为false */
    42. 					likes:[
    43. 						{id:1,name:'深夜网易云'},
    44. 						{id:2,name:'冲浪达人'},
    45. 						{id:3,name:'追剧达人'},
    46. 						{id:4,name:'梗王'}
    47. 					]
    48. 				}
    49. 			}
    50. 		})
    51. 	script>
    52. html>

     三、过滤器

    .filter

     

     在过滤器中也可以进行截取：

     效果展示：

    过滤器的串联：同时运行两个过滤器

    效果展示：

     

    代码块展示：

    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>1、插值title>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			<p>过滤器p>
    12. 			{{msg|strSplit|strSplit2}}
    13. 		div>
    14. 	body>
    15. 	body>
    16. 	<script type="text/jscript">
    17. 		/* 过滤器 */
    18. 		Vue.filter('strSplit',function(value){
    19. 			debugger;
    20. 			console.log(value);
    21. 			return value.substring(2,6);
    22. 			})
    23. 		Vue.filter('strSplit2',function(value){
    24. 			debugger;
    25. 			console.log(value);
    26. 			return value.substring(2,3);
    27. 			})	
    28. 		/* 实例化一个vue */
    29. 		new Vue({
    30. 			el:"#app",
    31. 			data(){
    32. 				return{
    33. 					msg:'hello vue! 我是一杯咖啡'
    34. 				}
    35. 			}
    36. 		})
    37. 	script>
    38. html>

    四、计算属性与监听器

    1、计算属性  computed:{}

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

    效果展示：

     

     当我任意输入一个数字的时候：

    2、监听属性 watch：{}

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

    效果展示：

    默认值为0时：

     

     设置值时：

     代码块展示：

    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>4、计算属性与监听属性title>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			<p>计算属性p>
    12. 			请输入第一个数：<input v-model="x" /><br>
    13. 			请输入第二个数：<input v-model="y" /><br>
    14. 			结果为：{{addFlag}}
    15. 			<p>监听属性p>
    16. 			请输入第km数：<input v-model="km" /><br>
    17. 			请输入第m数：<input v-model="m" /><br>
    18. 		div>
    19. 	body>
    20. 	body>
    21. 	<script type="text/jscript">
    22. 		/* 实例化一个vue */
    23. 		new Vue({
    24. 			el:"#app",
    25. 			data(){
    26. 				return{
    27. 					// 设置默认值
    28. 					x:0,
    29. 					y:0,
    30. 					km:0,
    31. 					m:0
    32. 				}
    33. 			},computed:{
    34. 				// 计算属性
    35. 				addFlag:function(){
    36. 					return parseInt(this.x) + parseInt(this.y)
    37. 				}
    38. 			},watch:{
    39. 				km:function(v){
    40. 					//  :(冒号)之前对应的是被监听的属性，v指的是被监听属性的值
    41. 					// 当v对弈的值发生变化的时候，会执行这个方法
    42. 					// v代表的是km
    43. 					// km = m*1000
    44. 					this.m = parseInt(v)*1000
    45. 				},
    46. 				m:function(v){
    47. 					// m = km/1000
    48. 					this.km = parseInt(v)/1000;
    49. 				}
    50. 			}
    51. 		})
    52. 	script>
    53. html>

    计算属性：一方影响另一方
    监听属性：相互影响

    小结：计算属性和监听属性的区别

             自己的理解

             computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

             computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，

             举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择。

             与watch之间的区别：

        刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

             watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，

            那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?

            上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!

     五、购物车案例

    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>1、插值title>
    7. 		<style>
    8. 			.a{
    9. 				color: yellow;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		
    15. 		<div id="app">
    16. 			<table >
    17. 				<tr>
    18. 					<td>物品td>
    19. 					<td>单价td>
    20. 					<td>数量td>
    21. 					<td>小计td>
    22. 				tr>
    23. 				<tr>
    24. 					<td>帽子td>
    25. 					<td>
    26. 						{{maozidanjia}}
    27. 					td>
    28. 					<td>
    29. 						<input v-model="maozishuliang" />
    30. 					td>
    31. 					<td>{{moazixiaoji}}td>
    32. 				tr>
    33. 				<tr>
    34. 					<td>衣服td>
    35. 					<td> 
    36. 						{{yifudanjia}}
    37. 					td>
    38. 					<td>
    39. 						<input v-model="yifushuliang" />
    40. 					td>
    41. 					<td>{{yifuxiaoji}}td>
    42. 				tr>
    43. 				<tr>
    44. 					<td>裤子td>
    45. 					<td>
    46. 						{{kuzidanjia}}
    47. 					td>
    48. 					<td>
    49. 						<input v-model="kuzishuliang" />
    50. 					td>
    51. 					<td>{{kuzixioaji}}td>
    52. 				tr>
    53. 				<tr>
    54. 					<td>总价{{zongjia}}td>
    55. 					<td colspan="3">td>
    56. 				tr>
    57. 			table>
    58. 		div>
    59. 	body>
    60. 	<script type="text/jscript">
    61. 		/* 实例化一个vue */
    62. 		new Vue({
    63. 			el:"#app",
    64. 			data(){
    65. 				return{
    66. 					maozidanjia:20,
    67. 					yifudanjia:299,
    68. 					kuzidanjia:199,
    69. 					maozishuliang:1,
    70. 					yifushuliang:1,
    71. 					kuzishuliang:1
    72. 				}
    73. 			},computed:{
    74. 				// 因为数量 会影响小计，小计不会影响数量，所以使用计算属性
    75. 				moazixiaoji:function(){
    76. 					return parseInt(this.maozidanjia) * parseInt(this.maozishuliang);
    77. 				},yifuxiaoji:function(){
    78. 					return parseInt(this.yifudanjia) * parseInt(this.yifushuliang);
    79. 				},kuzixioaji:function(){
    80. 					return parseInt(this.kuzidanjia) * parseInt(this.kuzishuliang);
    81. 				},zongjia:function(){
    82. 					return parseInt(this.yifuxiaoji) + parseInt(this.moazixiaoji) + parseInt(this.kuzixioaji);
    83. 				}
    84. 			}
    85. 		})
    86. 	script>
    87. html>

    效果展示：

     

    更改数量之后： 

     

     OK，今天的内容就分享到此啦，希望本篇内容对您有所帮助！

    我们下期再见~

    下期内容【Vue语法模板下集】。

  • 相关阅读:
    VL812 USB3.0扩展坞设计教程
    【电源专题】LDO基础——热性能2
    Mac nginx安装，通过源码安装教程
    [Android][JAVA][kotlin] 获取各种语言的星期，月份,长月份，缩写月份
    嵌入式数据库是什么
    VUE：组件
    整合定位技术应对物联网碎片化场景应用
    新人FPGA验证书籍推荐
    【微信小程序】swiper的使用
    k8s安装——ubuntu
  • 原文地址：https://blog.csdn.net/m0_67094505/article/details/126668365