• Vue模块语法上(插值&指令&过滤器&计算属性-监听属性)

                                                                    文章目录

    一、插值

     1）文本

     2）html

     3）属性

     4）表达式

     5）class绑定

     6）style绑定

     二、指令

    1.v-if|v-else|v-else-if

    2.v-show

    3.v-for

    4.v-bind

    5.v-on

    6.v-model

    三、过滤器

    全局过滤器

    局部过滤器

    四、计算属性&监听属性

    计算属性 

    监听属性

    案例--购物车 

    一、插值

     1）文本

              {{msg}}

     2）html

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

         

     3）属性

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

     4）表达式

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

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

              {{ number + 1 }}

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

             

  • 我的Id是js动态生成的

    •  

       5）class绑定

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

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

       6）style绑定

               v-bind:style="styleStr"

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

    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: yellow;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		
    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. 			
    23. 			<input value="值" />
    24. 			<input v-bind:value="valuestr" /><br />
    25. 			<input :value="valuestr" />
    26. 			<p>表达式  vue中可以对变量进行二次处理p>
    27. 			{{str.substring(0,4)}}<br />
    28. 			{{num + 4}}<br />
    29. 			{{ok ? '1' : 0}}<br />
    30. 			<span :id="idstr+'1'">书籍信息span>
    31. 			<p>class样式绑定p>
    32. 			<span :class="classStr">文本内容span>
    33. 			<p>style绑定p>
    34. 			<span :style="styleStr">文本内容span>
    35. 		div>
    36. 	body>
    37. 	<script type="text/javascript">
    38. 	/* 创建实例 */
    39. 		new Vue({
    40. 			el:'#app',
    41. 			data(){
    42. 				return {
    43. 					msg:'hello vue!!!',
    44. 					htmlstr:'文本内容',
    45. 					valuestr:'vue值',
    46. 					str:'hello world',
    47. 					num:6,
    48. 					ok:false,
    49. 					idstr:'book_',
    50. 					classStr:'a',
    51. 					styleStr:'color:blue'
    52. 				}
    53. 			}
    54. 		})
    55. 	script>
    56. html>

     二、指令

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

    核心指令

               (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model）

    1.v-if|v-else|v-else-if：

    根据其后表达式的bool值进行判断是否渲染该元素

                       他们只能是兄弟元素

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

                       v-else上一个兄弟元素必须是v-if或者是v-else-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: yellow;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		
    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. 	/* 创建实例 */
    31. 		new Vue({
    32. 			el:'#app',
    33. 			data(){
    34. 				return {
    35. 					score:0,
    36. 				}
    37. 			}
    38. 		})
    39. 	script>
    40. html>

     

    2.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. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			<p>v-showp>
    12. 			请输入结果：<input v-model="showflag" />
    13. 			<span v-show="showflag">show展示与否span>
    14. 			<span v-if="showflag">if展示与否span>
    15. 		div>
    16. 	body>
    17. 	<script type="text/javascript">
    18. 	/* 创建实例 */
    19. 		new Vue({
    20. 			el:'#app',
    21. 			data(){
    22. 				return {
    23. 					showflag:false
    24. 				}
    25. 			}
    26. 		})
    27. 	script>
    28. html>

     

    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>title>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			<p>v-forp>
    12. 			<select>
    13. 				
    14. 				<option v-for="l in likes" :value="l.id">{{l.name}}option>
    15. 			select>
    16. 			
    17. 			<div v-for="l in likes">
    18. 				<input type="checkbox" :value="l.id" />{{l.name}}
    19. 			div>
    20. 			
    21. 		div>
    22. 	body>
    23. 	<script type="text/javascript">
    24. 		/* 创建实例 */
    25. 		new Vue({
    26. 			el: '#app',
    27. 			data() {
    28. 				return {
    29. 					likes: [{
    30. 							id: 1,
    31. 							name: '军旗'
    32. 						},
    33. 						{
    34. 							id: 2,
    35. 							name: '乒乓球'
    36. 						},
    37. 						{
    38. 							id: 3,
    39. 							name: '篮球'
    40. 						},
    41. 						{
    42. 							id: 4,
    43. 							name: '羽毛球'
    44. 						}
    45. 					]
    46. 				}
    47. 			}
    48. 		})
    49. 	script>
    50. html>

    4.v-bind：

    绑定属性

    5.v-on：

    绑定事件

    6.v-model：

    用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值    v-for/v-model一起绑定[多选]复选框和单选框 

    它们三个详见上一期博客

    三、过滤器

    全局过滤器

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

     // value 表示要过滤的内容

    });

    局部过滤器

    new Vue({

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

    });

    1. 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|single}},{{msg|all|single}},{{msg|param(4,5)}}
    12. 		div>
    13. 	body>
    14. 	<script type="text/javascript">
    15. 		// 全局过滤器
    16. 		Vue.filter('all', function(value) {
    17. 			return value.substring(1, 4);
    18. 		});
    19. 		// 绑定边界	ES6具体体现
    20. 		new Vue({
    21. 			el: '#app',
    22. 			data() {
    23. 				return {
    24. 					msg:"hello vue！！！"
    25. 				};
    26. 			},
    27. 			methods: {
    28. 				handle() {
    29. 					alert("触发事件");
    30. 				}
    31. 			},
    32. 			filters:{
    33. 				'single':function(val){
    34. 					return val.substring(2,3);
    35. 				},
    36. 				'param':function(val,start,end){
    37. 					return val.substring(start,end);
    38. 				}
    39. 			}
    40. 		})
    41. 	script>
    42. html>
    43.  
    44.

    过滤器可以串联    

             {{ message | filterA | filterB }}

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

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

    四、计算属性&监听属性

    计算属性 

    一方影响另一方，推动作用

    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. 		
    10. 		<div id="app">
    11. 			<p>计算属性p>
    12. 			请输入第一个数:<input v-model="x" /><br />
    13. 			请输入第二个数:<input v-model="y" /><br />
    14. 			结果为:{{addFlag}}
    15. 		div>
    16. 	body>
    17. 	<script type="text/javascript">
    18. 	/* 创建实例 */
    19. 		new Vue({
    20. 			el:'#app',
    21. 			data(){
    22. 				return {
    23. 					/* 定义变量 */
    24. 					x:0,
    25. 					y:0
    26. 				}
    27. 			},computed:{
    28. 				/* 定义计算属性 */
    29. 				addFlag:function(){
    30. 					return parseInt(this.x) + parseInt(this.y);
    31. 				}
    32. 			}
    33. 		})
    34. 	script>
    35. 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. 		
    10. 		<div id="app">
    11. 			<p>计算属性p>
    12. 			请输入第一个数:<input v-model="x" /><br />
    13. 			请输入第二个数:<input v-model="y" /><br />
    14. 			结果为:{{addFlag}}
    15.  
    16. 			<p>监听属性p>
    17. 			请输入千米:<input v-model="km" /><br />
    18. 			请输入米:<input v-model="m" /><br />
    19. 			
    20. 		div>
    21. 	body>
    22. 	<script type="text/javascript">
    23. 	/* 创建实例 */
    24. 		new Vue({
    25. 			el:'#app',
    26. 			data(){
    27. 				return {
    28. 					/* 定义变量 */
    29. 					x:0,
    30. 					y:0,
    31. 					km:0,
    32. 					m:0
    33. 				}
    34. 			},computed:{
    35. 				/* 定义计算属性 */
    36. 				addFlag:function(){
    37. 					return parseInt(this.x) + parseInt(this.y);
    38. 				}
    39. 			},watch:{
    40. 				km:function(v){
    41. 					//冒号 :之前对应的是被监听的属性，v指的是被监听属性的值
    42. 					//当v对应的值发生变化的时候，会执行该方法
    43. 					//v代表千米
    44. 					this.m=parseInt(v)*1000;
    45. 				},
    46. 				m:function(v){
    47. 					this.km=parseInt(v)/1000;
    48. 				}
    49. 			}
    50. 		})
    51. 	script>
    52. 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. 		
    10. 		<div id="app">
    11. 			<p>购物车p>
    12. 			<table border="1px;">
    13. 				<tr>
    14. 					<th>物品th>
    15. 					<th>单价th>
    16. 					<th>数量th>
    17. 					<th>小计th>
    18. 				tr>
    19. 				<tr>
    20. 					<th>帽子th>
    21. 					<th>
    22. 						{{mzDanjia}}
    23. 					th>
    24. 					<th>
    25. 						<input v-model="mzShuliang" />
    26. 					th>
    27. 					<th>{{mzXiaoji}}th>
    28. 				tr>
    29. 				<tr>
    30. 					<th>衣服th>
    31. 					<th>
    32. 						{{yfDanjia}}
    33. 					th>
    34. 					<th>
    35. 						<input v-model="yfShuliang" />
    36. 					th>
    37. 					<th>{{yfXiaoji}}th>
    38. 				tr>
    39. 				<tr>
    40. 					<th>裤子th>
    41. 					<th>
    42. 						{{kzDanjia}}
    43. 					th>
    44. 					<th>
    45. 						<input v-model="kzShuliang" />
    46. 					th>
    47. 					<th>{{kzXiaoji}}th>
    48. 				tr>
    49. 				<tr>
    50. 					<td>总价td>
    51. 					<td colspan="3">
    52. 						{{zongjia}}
    53. 					td>
    54. 				tr>
    55. 			table>
    56. 		div>
    57. 	body>
    58. 	<script type="text/javascript">
    59. 	/* 创建实例 */
    60. 		new Vue({
    61. 			el:'#app',
    62. 			data(){
    63. 				return {
    64. 					/* 定义变量 */
    65. 					mzDanjia:20,
    66. 					yfDanjia:3000,
    67. 					kzDanjia:700,
    68. 					mzShuliang:1,
    69. 					yfShuliang:1,
    70. 					kzShuliang:1
    71. 				}
    72. 			},computed:{
    73. 				//因为数量会影响小计，小计变化影响数量，所以使用计算属性
    74. 				mzXiaoji:function(){
    75. 					return parseInt(this.mzDanjia) * parseInt(this.mzShuliang);
    76. 				},
    77. 				yfXiaoji:function(){
    78. 					return parseInt(this.yfDanjia)*parseInt(this.yfShuliang);
    79. 				},
    80. 				kzXiaoji:function(){
    81. 					return parseInt(this.kzDanjia)*parseInt(this.kzShuliang);
    82. 				},
    83. 				zongjia:function(){
    84. 					return parseInt(this.yfXiaoji)+parseInt(this.kzXiaoji)+parseInt(this.mzXiaoji);
    85. 				}
    86. 			}
    87. 		})
    88. 	script>
    89. html>

     

     

  • 相关阅读:
    前缀和与树状数组（手撕算法篇）
    物联网毕业设计 - 基于单片机的高精度北斗定位控制终端
    【LeetCode 每日一题】7. 整数反转
    反序列化漏洞
    小工具——筛选图像小工具
    轻量封装WebGPU渲染系统示例＜2＞-彩色立方体(源码)
    STM8应用笔记6.3.8位定时器应用之三
    视频翻译字幕的软件哪个好？看完你就知道了
    论文阅读：Neural Graph Collaborative Filtering
    DOM&BOM
  • 原文地址：https://blog.csdn.net/weixin_67450855/article/details/126668354