vue模板语法很难？（上）

发布于：2022-12-31 ⋅ 阅读:(558) ⋅ 点赞:(0)

目录

一，插值

    1.1 文本

    1.2 html

    1.3 属性

    1.4 表达式

1.5 class绑定

1.6 style绑定

 二，指令

概念

 v-if|v-else|v-else-if：

  v-show：

  v-for

三，过滤器

全局过滤器

局部过滤器

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

注2：过滤器可以串联     

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

四，计算属性&监听属性

计算属性

        监听属性

        购物车案例

一，插值

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.a{
			color:red;
		}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			<h3>{{msg}}</h3>
			<p>html转义</p>
			<div v-html="htmlstr"></div>
			<p>v- bind 属性绑定</p>
			<!-- 所有原生态的属性，要利用vue的变量，都需要在对应的属性前加v-bind -->
			<a v-bind:href="hrefstr">百度</a><!-- 跳转 -->
			<input v-bind:value="valuestr"/><!-- 一种绑定 -->
			<input :value="valuestr"/><!-- 第二种绑定 -->
			<p>表达式</p>
			{{str.substring(0,4).toUpperCase()}}
			张三:{{number+1}}
			{{ok ? 'yes' : 'no'}}
			<span :id="'goods_id_'+id">xx</span>
			<span class="a">class绑定1</span>
			<span :class="classStr">class绑定2</span>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					// ctrl+k格式化
					msg: 'hello vue！！！',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
					hrefstr:'http://www.baidu.com',
					valuestr:'2223',
					str:'Java666',
					classStr:'a',
					number:59,
					ok:false,
					id:66,
					
				};
			}
		})
	</script>
</html>

 总效果展示：

    1.1 文本

          {{msg}}

 

 效果：

    1.2 html

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

 效果：

 

    1.3 属性

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

 

效果：

    1.4 表达式

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

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

          {{ number + 1 }}

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

          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

 

效果：

 

  

1.5 class绑定

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

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

 

 效果：

  

1.6 style绑定

  v-bind:style="expression"

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

 

 效果：

 二，指令

概念

  指的是带有“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：

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

他们只能是兄弟元素

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

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

测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>v-if</p>
			<!-- 输入分数：60分以下不及格，60-70分为合格，70-80分为良好 80-90分为优 90-100 优+ -->
			请输入分数：<input v-model="score" />
			对应的结果：
			<span v-if="score<60">不及格</span>
			<span v-else-if="score<70">合格</span>
			<span v-else-if="score<80">良</span>
			<span v-else-if="score<90">优</span>
			<span v-else-if="score<100">优+</span>
			<span v-else="">输入不合法</span>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					score:0
				}
			}
		})
	</script>
</html>

测试结果：

 

  

  v-show：

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

测试代码：添加如下代码

 

效果展示：

 

  v-for

  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一起绑定[多选]复选框和单选框  

三，过滤器

全局过滤器

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

 // value 表示要过滤的内容

});

局部过滤器

new Vue({

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

});

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

<!-- 在两个大括号中 -->

{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			{{msg|strSplit}}
			
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('strSplit',function(value){
			console.log(value);
			return value.substring(0,5);
		})
		
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					msg:'hello vue!!!'
				}
			}
		})
	</script>
</html>

 

注2：过滤器可以串联     

{{ message | filterA | filterB }}

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- 过滤器的串联 -->
			{{msg|strSplit|strSplit2}}
		
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('strSplit',function(value){
			console.log(value);
			return value.substring(0,5);
		})
		Vue.filter('strSplit2',function(value){
			debugger;
			console.log(value);
			return value.substring(3,5);
		})
		
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					msg:'hello vue!!!'
				}
			}
		})
	</script>
</html>

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- {{msg|strSplit}} -->
			<!-- 过滤器的串联 -->
			{{msg|strSplit|strSplit2}}
			<!-- 过滤器传参 -->
			{{msg|strSplit3(2,5)}}
			{{msg|strSplit3(1,4)}}
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('strSplit',function(value){
			console.log(value);
			return value.substring(0,5);
		})
		Vue.filter('strSplit2',function(value){
			debugger;
			console.log(value);
			return value.substring(3,5);
		})
		Vue.filter('strSplit3',function(value,a,b){
			debugger;
			console.log(value);
			return value.substring(a,b);
		})
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					msg:'hello vue!!!'
				}
			}
		})
	</script>
</html>

四，计算属性&监听属性

计算属性

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

   computed:{}

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
		<p>计算属性</p>
		请输入第一个数:<input v-model="x" /><br />
		请输入第二个数:<input v-model="y" /><br />
		结果为：{{addFlag}}
	</div>
</body>
<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					x:0,
					y:0
				}
			},computed:{
				// 计算属性
				addFlag:function(){
					return parseInt(this.x) + parseInt(this.y);
				}
			}
		})
	</script>
</html>

效果展示：

监听属性

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

   watch:{}

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>监听属性</p>
			请输入千米:<input v-model="km" /><br />
			请输入米:<input v-model="m" /><br />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					km:0,
					m:0
				}
			},
			watch:{
				km:function(v){
					// :之前对应的是被监听的属性，v值的是被监听属性的值
					// 当v对应的值发生变化的时候 会执行这个方法
					//v 代表的是千米
					this.m= parseInt(v)*1000
				},
				m:function(v){
					this.km =parseInt(v)/1000;
				}
			}
		})
	</script>
</html>

 效果展示：

 

购物车案例

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<table>
				<tr>
					<td>物品</td>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td>衣服</td>
					<td>
						{{yifuDanjia}}元
					</td>
					<td>
						<input v-model="yifuShuliang" />
					</td>
					<td>
						{{yifuXiaoji}}
					</td>
				</tr>
				<tr>
					<td>鞋子</td>
					<td>
						{{xieziDanjia}}元
					</td>
					<td>
						<input v-model="xieziShuliang" />
					</td>
					<td>
						{{xieziXiaoji}}
					</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>
						{{kuziDanjia}}元
					</td>
					<td>
						<input v-model="kuziShuliang" />
					</td>
					<td>
						{{kuziXiaoji}}
					</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">{{zongJia}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					yifuDanjia: 2990,
					xieziDanjia: 17241,
					kuziDanjia: 300,
					yifuShuliang: 1,
					xieziShuliang: 1,
					kuziShuliang: 1
				}
			},
			computed: {
				//因为数量 会影响小计 不会影响数量，所有使用计算属性
				yifuXiaoji: function() {
					return parseInt(this.yifuDanjia) * parseInt(this.yifuShuliang);
				},
				xieziXiaoji: function() {
					return parseInt(this.xieziDanjia) * parseInt(this.xieziShuliang);
				},
				kuziXiaoji: function() {
					return parseInt(this.kuziDanjia) * parseInt(this.kuziShuliang);
				},
				zongJia: function() {
					return parseInt(this.kuziXiaoji) + parseInt(this.yifuXiaoji) + parseInt(this.xieziXiaoji);
				}
			}
 
		})
	</script>
</html>

效果展示：

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布