Vue基础语法(插值、指令、过滤器、 计算属性和监听属性)

最新推荐文章于 2024-05-06 18:02:02 发布
最新推荐文章于 2024-05-06 18:02:02 发布
阅读量696 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43624670/article/details/98068230
版权
Vue基础语法
插值.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>指令</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3> 条件指令（if elseif else）</h3>
					{{msg}}
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="">E</div>
				</li>
				<li>
					<h3> V-show </h3>
					<input type="text" v-model="show" />
					<!-- 有值的时候出现 -->
					<div v-show="show">呸 ！平胸</div>
				</li>
				<li>
					<h3> V-for </h3>
					<div v-for="item,index in arr">
						{{item}},{{index}}
					</div>
					<div v-for="item,index in objArr">
						{{item.name}},{{index}}
					</div>
				</li>
				<li>
					<h3> 动态参数 </h3>
					<input type="text" v-model="evname" />
					<!-- dblclick -->
					<button v-on:[evname]="ma">点我</button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello',
					score: 88,
					show: null,
					arr: [1, 4, 6, 8, 9],
					objArr: [{
						id: 's001',
						name: '智障'
					}, {
						id: 's002',
						name: '芝麻'
					}, {
						id: 's003',
						name: '孙子'
					}],
					evname:'click'
				};
			},
			methods:{
				ma(){
					console.log("click 方法执行");
				}
			}
		});
	</script>
</html>

运行代码就可以得到
在这里插入图片描述

指令 ：指的是带有“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：根据其后表达式的bool值进行判断是否渲染该元素
            他们只能是兄弟元素
            v-else-if上一个兄弟元素必须是v-if
            v-else上一个兄弟元素必须是v-if或者是v-else-if

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

          v-bind
          v-on
          v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   
            v-for/v-model一起绑定[多选]复选框和单选框
指令.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>指令</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3> 条件指令（if elseif else）</h3>
					{{msg}}
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="">E</div>
				</li>
				<li>
					<h3> V-show </h3>
					<input type="text" v-model="show" />
					<!-- 有值的时候出现 -->
					<div v-show="show">呸 ！平胸</div>
				</li>
				<li>
					<h3> V-for </h3>
					<div v-for="item,index in arr">
						{{item}},{{index}}
					</div>
					<div v-for="item,index in objArr">
						{{item.name}},{{index}}
					</div>
				</li>
				<li>
					<h3> 动态参数 </h3>
					<input type="text" v-model="evname" />
					<!-- dblclick -->
					<button v-on:[evname]="ma">点我</button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello',
					score: 88,
					show: null,
					arr: [1, 4, 6, 8, 9],
					objArr: [{
						id: 's001',
						name: '智障'
					}, {
						id: 's002',
						name: '芝麻'
					}, {
						id: 's003',
						name: '孙子'
					}],
					evname:'click'
				};
			},
			methods:{
				ma(){
					console.log("click 方法执行");
				}
			}
		});
	</script>
</html>

运行可得
在这里插入图片描述

过滤器
 全局过滤器
   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：过滤器函数接受表达式的值作为第一个参数 
   注2：过滤器可以串联     
        {{ message | filterA | filterB }}
   注3：过滤器是JavaScript函数，因此可以接受参数： 
        {{ message | filterA('arg1', arg2) }}

   注4：js定义一个类
        function Stu(){};
        Stu.prototype.add(a,b){};//添加一个新的实例方法
		Stu.update(a,b){};//添加一个新的类方法
过滤器.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>过滤器</title>
	</head>
	<body>
		<!-- Vue实例挂载的边界-->
		<div id="app">
			<ul>
				<li>
					<h3>局部过滤器</h3>
					{{msg}}<br />
					{{msg | a}}
				</li>

				<li>
					<h3>局部过滤器可串联</h3>
					{{msg}}<br />
					{{msg | a | b}}
					{{msg | b | a}}
				</li>

				<li>
					<h3>全局过滤器</h3>
					{{msg | c}}<br />
				</li>

			</ul>
		</div>

	</body>
	<script type="text/javascript">
		Vue.filter('c', function(v) {
			return v.substring(7);
		})

		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'http://www.baidu.com',
				};
			},
			filters: {
				a(v) {
					return v.substring(4);
				},
				b(v) {
					return v.substring(3);
				}
			}
		})
	</script>
</html>

在这里插入图片描述

计算属性和监听属性
   computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
         computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
         举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择 
         与watch之间的区别：
 
　　     刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
         watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
 
 
        那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
        上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!
计算属性和监听属性.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>计算属性监听属性</title>
	</head>
	<body>
		<!-- Vue实例挂载的边界-->
		<div id="app">
			<ul>
				<li>
					<h3>计算属性</h3>
					数量：<input type="text" v-model="num" />
					单价：<input type="text" v-model="price" />
					计算总价：{{total}}
					
					<h3>监听属性</h3>
					km:<input type="text" v-model="km" />
					m:<input type="text" v-model="m" />
				</li>

			</ul>
		</div>

	</body>
	<script type="text/javascript">
		Vue.filter('c',function(v){
			return v.substring(7);
		})
		
		new Vue({
			el: "#app",
			data() {
				return {
					num:1,
					price:19,
					km:1,
					m:1000
				};
			},computed:{
				// 在计算属性定义的时候,是可以获取到Vue实例中定义任何变量
				total(){
					return parseInt(this.num) * parseInt(this.price);
				}
			},
			watch:{
				km(v){
					this.m=v*1000;
				},
				m(v){
					this.km=v/1000;
				}
			}
		})
	</script>
</html>

在这里插入图片描述

听晚风续过晚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue基础语法（插值、指令、过滤器、计算属性与监听属性）
Make Excellence a Habit
08-19 571
1. 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? ‘YES’ : ‘NO’ }} <l...
Vue 基础语法 之 插值&指令&过滤器&计算属性&监听属性
qq_44641053的博客
08-01 276
Vue 基础语法 之 插值、指令、过滤器、计算属性与监听属性Vue 基础语法插值指令过滤器计算属性与监听属性 Vue 基础语法 插值 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的...
Vue02基础语法-插值+过滤器+计算属性+计算属性
全栈
10-17 612
努力是为了不平庸~Vue.js 使用了的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。1.1 插值。
Vue 过滤器、计算属性、侦听器 图解版 一目了然
最新发布
2401_84152092的博客
05-06 673
目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值过滤器只能用在, 插值表达式和v-bind表达式Vue中的过滤器场景字母转大写, 输入"hello", 输出"HELLO"字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"语法:Vue.filter(“过滤器名”, (值) => {return “返回处理后的值”})filters: {过滤器名字: (值) => {return “返回处理后的值”}例子:全局定义字母都大写的过滤器。
Vue模块语法上(插值&指令&过滤器&计算属性-监听属性)
weixin_67450855的博客
09-02 348
一、插值 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 三、过滤器 全局过滤器 局部过滤器 四、计算属性&监听属性 计算属性 监听属性 案例--购物车
vue基础语法{插值，指令，过滤器，计算属性与监听属性
what_where的博客
07-31 181
vue基础语法{插值，指令，过滤器，计算属性与监听属性}1.插值2.指令3. 过滤器4.计算属性与监听属性 1.插值 1.1 文本 {{msg}} 1.2 html 使用v-html指令用于输出html代码 1.3 属性 HTML属性中的值应使用v-bind指令 1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {...
Vue插值,指令,过滤器,监听属性及计算属性
lisfgj的博客
07-18 52
魔法按钮获取输入框的值, 根据值来决定事件。
vue模板语法上集(插值、指令、过滤器、计算属性与监听属性)
m0_60375943的博客
10-28 117
1, 插值 文本：{{msg}} html：使用v-html指令用于输出html代码 属性：HTML属性中的值应使用v-bind指令 表达式：Vue提供了完全的JavaScript表达式支持 如： {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} <li v-bind:id="'list-' + id">我的...
Vue - 插值 - 指令 - 过滤器 - 计算属性与监听属性 - 购物车案例
qq_63492318的博客
09-02 488
一下：下拉框是要将v-for写在中的；而复选框则是要在标签的外面再定义一个div标签、并且把v-for写到这个div标签中的，否则会报错。包括关于vue的使用什么的Leaf也都在昨天的文章里面说过了，今天就直接统一来直接使用。我们就可以发现，第二个过滤器打印的value值就是第一个过滤器执行过滤操作后的值；最基础的其实就是文本的输出，这一个在Leaf昨天的文章里面就已经使用过了；为了节省不必要的阅读时间，我就不在每一个标签后面都放上运行后的效果图了；这个标签有点细节，在下拉框和复选框的使用中可以体现出来；
VUE教程03 计算属性、函数和过滤器
zhangxm_qz的博客
05-04 307
文章目录计算属性过滤器 计算属性 插值语法特点是可以在{{}}中编写合法的JavaScript表达式，但是没有代码提示，语句过于复杂不利于我们维护。如何解决？对于复杂的逻辑我们可以使用。 计算属性使用示例如下： <div id="app"> <p>{{name}}</p> <p>{{age + 1}}</p> <p>{{msg.split("").reverse().join("")}}</p>
Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器
10-20
在本文中，我们将深入探讨Vue.js的基础概念，包括Vue实例的生命周期、数据绑定、手动挂载、指令以及过滤器。 1. **Vue实例的生命周期**： Vue实例从创建到销毁的过程称为生命周期。包括`beforeCreate`、`created`...
Vue基本使用之对象提供的属性功能
11-26
本文将深入探讨Vue的基本使用，特别是对象提供的属性功能，包括过滤器、计算和监听属性以及Vue对象的生命周期。 **一、过滤器** 过滤器是Vue中用于格式化文本输出的自定义函数，可以在模板中的插值表达式或v-bind...
Vue基础培训案例笔记素材等全套课程课件资料.zip
05-04
5. **指令与过滤器**: 指令如`v-if`、`v-for`控制DOM的渲染，过滤器则可以对数据进行格式化处理。 6. **组件化**: Vue中的组件是可复用的代码块，可以封装HTML、CSS和JavaScript。组件化提高了代码的组织性和可维护...
vue实现搜索过滤效果
10-16
组件的`props`接收外部传入的`list`和`isactive`，`computed`属性`modifylist`返回`list`的值，这可能是为了创建一个计算属性以供过滤使用。`methods`包含`changeActive`和`modify`两个方法，它们用于触发父组件的...
ElementUI简介
热门推荐
byg
08-05 1万+
ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 ElementUI官网：http://element-cn.eleme.io/#/zh-CN 注1：类似前端框架还有iview 用ElementUI做的d...
SPA项目开发之登录注册
byg
08-09 3766
多说无益直接上代码 前端代码 vue 怎么引入和配置使用 element-ui 框架 a、 使用 vue-cli 脚手架工具创建一个 vue 项目 vue init webpack pro01 b、npm 安装 elementUI cd pro01 # 进入新建项目的根目录 npm install element-ui -S ...
SPA项目开发之首页导航+左侧菜单
byg
08-10 589
一、Mock.js 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： a. 老大，接口文档还没输出，我的好多活干不下去啊！ b. 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 众所周...
简单模仿微信公众号后台接口文档
byg
08-15 493
简单模仿微信公众号后台接口文档 首先我们先看下微信公众号后台接口文档的模板 然后在进行操作 点开链接 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140840 可以看到我们要做成样式 一、用户登录 接口调用请求说明： http请求方式: GET（请使用https协议） https://xxx.xxx.xxx:80...
vue2 计算属性和监听器
10-11
Vue2 中的计算属性和监听器都是用于响应式地更新视图的，但它们的使用场景略有不同。 计算属性是根据已有的数据计算而来，可以在模板中像普通属性一样使用，并且会缓存计算结果，只有在依赖的数据发生改变时才会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

听晚风续过晚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值