• vue模板语法上集

    目录

    一、插值

    文本

    html 

    vue属性

    class绑定

     表达式

    二、指令

     核心指令

    三、过滤器

    全局过滤器

    局部过滤器 

    四、计算属性&监听器

    一、插值

    文本

    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. 			<p>文本p>
    12. 			<h3>{{msg}}h3>
    13. 		div>
    14. 		<script type="text/javascript">
    15. 			new Vue({
    16. 				el:'#app',
    17. 				data(){
    18. 					return {
    19. 						msg:'hellow vue',
    20. 					}
    21. 				}
    22. 			})
    23. 		script>
    24. 	body>
    25. html>

     

     

    html 

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

    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. 			<p>htmlp>
    12. 			<div v-html="htmlstr">div>
    13. 		div>
    14. 		<script type="text/javascript">
    15. 			new Vue({
    16. 				el:'#app',
    17. 				data(){
    18. 					return {
    19. 						htmlstr:'
      html片段
      '
    20. 					}
    21. 				}
    22. 			})
    23. 		script>
    24. 	body>
    25. html>

     

     

    vue属性

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

    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. 			<p>v-bind 属性绑定p>
    12. 			<input value="值" />
    13. 			<input v-bind:value="valuestr" />
    14. 			
    15. 		div>
    16. 		<script type="text/javascript">
    17. 			new Vue({
    18. 				el:'#app',
    19. 				data(){
    20. 					return {
    21. 						msg:'hellow vue',
    22. 						htmlstr:'
      html片段
      '      ,
    23. 						valuestr:'vue值'
    24. 					}
    25. 				}
    26. 			})
    27. 		script>
    28. 	body>
    29. html>

     

     

    class绑定

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

    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. 		<style>
    8. 			.a{
    9. 				color:pink;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		
    15. 		<div id="app">
    16. 			<span :class="classStr">文本内容span>
    17. 		div>
    18. 		<script type="text/javascript">
    19. 			new Vue({
    20. 				el:'#app',
    21. 				data(){
    22. 					return {
    23. 						classStr:'a'
    24. 					}
    25. 				}
    26. 			})
    27. 		script>
    28. 	body>
    29. html>

     

     

     表达式

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

    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. 		<style>
    8. 			.a{
    9. 				color:pink;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		
    15. 		<div id="app">
    16.  			<p>vue中可以对变量的进行二次处理p>
    17. 			{{str.substring(0,4)}}<br />
    18. 			{{num+4}}<br />
    19. 			{{ok?'1':'0'}}<br />
    20. 			<span :id="idstr+'id'">书籍信息span> 
    21. 			
    22. 			<span :class="classStr">文本内容span>
    23. 		div>
    24. 		<script type="text/javascript">
    25. 			new Vue({
    26. 				el:'#app',
    27. 				data(){
    28. 					return {
    29. 						str:'hello world',
    30. 						num:6,
    31. 						ok:false,
    32. 						idstr:'book_',
    33. 						classStr:'a'
    34. 					}
    35. 				}
    36. 			})
    37. 		script>
    38. 	body>
    39. html>

     

     

    二、指令

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

     核心指令

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

    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>v-ifp>
    11. 			请输入分数:<input v-model="score" />
    12. 			对应的结果：
    13. 			<span v-if="score<60">不及格span>
    14. 			<span v-else-if="score<70">合格span>
    15. 			<span v-else-if="score<80">良span>
    16. 			<span v-else-if="score<90">优秀span>
    17. 			<span v-else-if="score<=100">优+span>
    18. 			<span v-else="">输入不合法span>
    19. 		div>
    20. 	body>
    21. 	<script type="text/javascript">
    22. 		new Vue({
    23. 			el:'#app',
    24. 			data(){
    25. 				return{
    26. 					score:0
    27. 				}
    28. 			}
    29. 		})
    30. 	script>
    31. html>

     

     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下标

    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>v-forp>
    11. 			<select>
    12. 				<option v-for="l in likes" :value="l.id">{{l.name}}option>
    13. 			select>
    14. 			<br />
    15. 			<div v-for="l in likes">
    16. 				<input type="checkbox" :value="l.id" />{{l.name}}
    17. 			div>
    18. 			
    19. 		div>
    20. 	body>
    21. 	<script type="text/javascript">
    22. 		new Vue({
    23. 			el:'#app',
    24. 			data(){
    25. 				return{
    26. 					likes:[
    27. 						{id:1,name:'军旗'},
    28. 						{id:1,name:'桌球'},
    29. 						{id:1,name:'乒乓球'},
    30. 						{id:1,name:'篮球'}
    31. 					]
    32. 				}
    33. 			}
    34. 		})
    35. 	script>
    36. html>

     

     

     

    v-bind

    v-on

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

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

    三、过滤器

    全局过滤器

    1. Vue.filter('filterName', function (value) {
    2.  // value 表示要过滤的内容
    3. });

    局部过滤器 

    1. new Vue({
    2.  filters:{'filterName':function(value){}}
    3. });

     

     

    四、计算属性&监听器

    计算属性

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

    computed:{}

    监听属性

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

    watch:{}

    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. 			<p>计算属性p>
    12. 			<table border="1" style="width: 600px;height: 300px;">
    13. 				<tr>
    14. 					<td>物品td>
    15. 					<td>单价td>
    16. 					<td>数量td>
    17. 					<td>小计td>
    18. 				tr>
    19. 				<tr>
    20. 					<td>帽子td>
    21. 					<td>{{maoziDanjia}}td>
    22. 					<td>
    23. 						<input v-model="maozi" />
    24. 					td>
    25. 					<td>
    26. 						{{maoziTotal}}
    27. 					td>
    28. 				tr>
    29. 				<tr>
    30. 					<td>衣服td>
    31. 					<td>{{yifuDanjia}}td>
    32. 					<td>
    33. 						<input v-model="yifu" />
    34. 					td>
    35. 					<td>
    36. 						{{yifuTotal}}
    37. 					td>
    38. 				tr>
    39. 				<tr>
    40. 					<td>裤子td>
    41. 					<td>{{kuziDanjia}}td>
    42. 					<td>
    43. 						<input v-model="kuzi" />
    44. 					td>
    45. 					<td>
    46. 						{{kuziTotal}}
    47. 					td>
    48. 				tr>
    49. 				<tr>
    50. 					<td>总价td>
    51. 					<td colspan="3">{{total}}td>
    52. 				tr>
    53. 			table>
    54. 			<p>监听属性p>
    55. 			千米：<input v-model="km" />
    56. 			米：<input v-model="m" />
    57. 		div>
    58. 	body>
    59. 	<script type="text/javascript">
    60. 		// 全局过滤器
    61. 		Vue.filter('all', function(value) {
    62. 			return value.substring(1, 4);
    63. 		});
    64. 		// 绑定边界	ES6具体体现
    65. 		new Vue({
    66. 			el: '#app',
    67. 			data() {
    68. 				return {
    69. 					maoziDanjia:10,
    70. 					yifuDanjia:30,
    71. 					kuziDanjia:20,
    72. 					maozi:1,
    73. 					yifu:1,
    74. 					kuzi:1,
    75. 					km:2,
    76. 					m:2000
    77. 				};
    78. 			},
    79. 			methods: {
    80. 				handle() {
    81. 					alert("触发事件");
    82. 				}
    83. 			},
    84. 			computed:{
    85. 				maoziTotal(){
    86. 					return this.maoziDanjia*this.maozi;
    87. 				},
    88. 				yifuTotal(){
    89. 					return this.yifuDanjia*this.yifu;
    90. 				},
    91. 				kuziTotal(){
    92. 					return this.kuziDanjia*this.kuzi;
    93. 				},
    94. 				total(){
    95. 					return this.maoziTotal+this.yifuTotal+this.kuziTotal;
    96. 				}
    97. 			},
    98. 			watch:{
    99. 				// v指的是m变量
    100. 				m: function(v){
    101. 					this.km = parseInt(v)/1000;
    102. 				},
    103. 				// v指的是km变量
    104. 				km: function(v){
    105. 					this.m = parseInt(v)*1000;
    106. 				}
    107. 			}
    108. 		})
    109. 	script>
    110. html>
    111.

     

     

  • 相关阅读:
    【C语言经典100例题-66】（用指针解决）输入3个数a,b,c，按大小顺序输出。
    C语言 深度探究C语言中的函数
    python视频帧转图像
    如何学习Arduino单片机
    PMI-ACP（103：57- 103）
    Linux调试器-gdb使用
    U9二次开发之补丁制作
    RPC远程调用框架Dubbo
    PMP刷题小结
    Vue插槽
  • 原文地址：https://blog.csdn.net/m12120426/article/details/126666868