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

最新推荐文章于 2024-09-10 20:26:21 发布
最新推荐文章于 2024-09-10 20:26:21 发布
阅读量696 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67450855/article/details/126668354
版权

                                                                文章目录

一、插值

 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' }}

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

 

   5）class绑定

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

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

   6）style绑定

           v-bind:style="styleStr"

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

<!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>
		<!-- class样式绑定的样式 -->
		<style>
			.a{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			{{msg}}
			<p>html 页面转义</p>
			<div v-html="htmlstr"></div>
			<p>v-bind属性绑定</p>
			<!-- 所有原生态的属性，要利用vue的变量，前加v-bind -->
			<input value="值" />
			<input v-bind:value="valuestr" /><br />
			<input :value="valuestr" />
			<p>表达式  vue中可以对变量进行二次处理</p>
			{{str.substring(0,4)}}<br />
			{{num + 4}}<br />
			{{ok ? '1' : 0}}<br />
			<span :id="idstr+'1'">书籍信息</span>
			<p>class样式绑定</p>
			<span :class="classStr">文本内容</span>
			<p>style绑定</p>
			<span :style="styleStr">文本内容</span>
		</div>
	</body>
	<script type="text/javascript">
	/* 创建实例 */
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'hello vue!!!',
					htmlstr:'<span style="color:red;">文本内容</span>',
					valuestr:'vue值',
					str:'hello world',
					num:6,
					ok:false,
					idstr:'book_',
					classStr:'a',
					styleStr:'color:blue'
				}
			}
		})
	</script>
</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

<!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>
		<!-- class样式绑定的样式 -->
		<style>
			.a{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>v-if</p>
			<!-- 当我输入分数60分：不及格 60-70：为合格 70-80：良 80-90：优秀 90+：优++ -->
			请输入分数：<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">
	/* 创建实例 */
		new Vue({
			el:'#app',
			data(){
				return {
					score:0,
				}
			}
		})
	</script>
</html>

 

2.v-show：

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

<!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">
			<p>v-show</p>
			请输入结果：<input v-model="showflag" />
			<span v-show="showflag">show展示与否</span>
			<span v-if="showflag">if展示与否</span>
		</div>
	</body>
	<script type="text/javascript">
	/* 创建实例 */
		new Vue({
			el:'#app',
			data(){
				return {
					showflag:false
				}
			}
		})
	</script>
</html>

 

3.v-for：

类似JS的遍历：

                             遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

                             遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

<!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">
			<p>v-for</p>
			<select>
				<!-- 下拉框 -->
				<option v-for="l in likes" :value="l.id">{{l.name}}</option>
			</select>
			<!-- 复选框 -->
			<div v-for="l in likes">
				<input type="checkbox" :value="l.id" />{{l.name}}
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		/* 创建实例 */
		new Vue({
			el: '#app',
			data() {
				return {
					likes: [{
							id: 1,
							name: '军旗'
						},
						{
							id: 2,
							name: '乒乓球'
						},
						{
							id: 3,
							name: '篮球'
						},
						{
							id: 4,
							name: '羽毛球'
						}
					]
				}
			}
		})
	</script>
</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){}}

});

<!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|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
		</div>
	</body>
	<script type="text/javascript">
		// 全局过滤器
		Vue.filter('all', function(value) {
			return value.substring(1, 4);
		});
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
					msg:"hello vue！！！"
				};
			},
			methods: {
				handle() {
					alert("触发事件");
				}
			},
			filters:{
				'single':function(val){
					return val.substring(2,3);
				},
				'param':function(val,start,end){
					return val.substring(start,end);
				}
			}
		})
	</script>
</html>

过滤器可以串联    

         {{ message | filterA | filterB }}

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

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

四、计算属性&监听属性

计算属性 

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

<!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">
			<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>

监听属性

相互影响

<!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">
			<p>计算属性</p>
			请输入第一个数:<input v-model="x" /><br />
			请输入第二个数:<input v-model="y" /><br />
			结果为:{{addFlag}}

			<p>监听属性</p>
			请输入千米:<input v-model="km" /><br />
			请输入米:<input v-model="m" /><br />
			
		</div>
	</body>
	<script type="text/javascript">
	/* 创建实例 */
		new Vue({
			el:'#app',
			data(){
				return {
					/* 定义变量 */
					x:0,
					y:0,
					km:0,
					m:0
				}
			},computed:{
				/* 定义计算属性 */
				addFlag:function(){
					return parseInt(this.x) + parseInt(this.y);
				}
			},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">
			<p>购物车</p>
			<table border="1px;">
				<tr>
					<th>物品</th>
					<th>单价</th>
					<th>数量</th>
					<th>小计</th>
				</tr>
				<tr>
					<th>帽子</th>
					<th>
						{{mzDanjia}}
					</th>
					<th>
						<input v-model="mzShuliang" />
					</th>
					<th>{{mzXiaoji}}</th>
				</tr>
				<tr>
					<th>衣服</th>
					<th>
						{{yfDanjia}}
					</th>
					<th>
						<input v-model="yfShuliang" />
					</th>
					<th>{{yfXiaoji}}</th>
				</tr>
				<tr>
					<th>裤子</th>
					<th>
						{{kzDanjia}}
					</th>
					<th>
						<input v-model="kzShuliang" />
					</th>
					<th>{{kzXiaoji}}</th>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">
						{{zongjia}}
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
	/* 创建实例 */
		new Vue({
			el:'#app',
			data(){
				return {
					/* 定义变量 */
					mzDanjia:20,
					yfDanjia:3000,
					kzDanjia:700,
					mzShuliang:1,
					yfShuliang:1,
					kzShuliang:1
				}
			},computed:{
				//因为数量会影响小计，小计变化影响数量，所以使用计算属性
				mzXiaoji:function(){
					return parseInt(this.mzDanjia) * parseInt(this.mzShuliang);
				},
				yfXiaoji:function(){
					return parseInt(this.yfDanjia)*parseInt(this.yfShuliang);
				},
				kzXiaoji:function(){
					return parseInt(this.kzDanjia)*parseInt(this.kzShuliang);
				},
				zongjia:function(){
					return parseInt(this.yfXiaoji)+parseInt(this.kzXiaoji)+parseInt(this.mzXiaoji);
				}
			}
		})
	</script>
</html>

 

 

七月472
关注
Vue基础语法（插值、指令、过滤器、计算属性与监听属性）
Make Excellence a Habit
08-19 582
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_52499745的博客
09-30 357
Vue——计算属性、属性监听器、过滤器
Vue2.0——过滤器,计算属性,属性监听器
qq_56607109的博客
09-22 402
filter主要用于数据展示之前的处理过滤器只能用在v-bind或者插值表达式中要定义到filters节点下，本质上是一个函数在过滤器函数中，一定要有return值再过滤器的形参中，就可以获取到“管道符”前面待处理的那个值。
vue中的计算属性，过滤器，侦听器
weixin_49405038的博客
04-20 216
vue计算属性-computed 语法: computed: { "计算属性名" () { return "值" } } 例如：让页面显示两个数字和和 <template> <div> <p>和为: {{ num }}</p> </div> </template> <script> export default { data() { return {
Vue学习之计算属性、侦听器与过滤器详解
道阻且长
07-11 434
Vue学习之计算属性、侦听器与过滤器详解
Vue 基础语法 之 插值&指令&过滤器&计算属性&监听属性
qq_44641053的博客
08-01 342
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提供了完全的...
Vue基本语法 -- 插值&过滤器
weixin_62322136的博客
07-30 313
使用v-html指令用于输出html代码通过v-bind给标签添加HTML属性Vue提供了完全的JavaScript表达式支持'YES''NO'}}
Vue02基础语法-插值+过滤器+计算属性+计算属性
全栈
10-17 629
努力是为了不平庸~Vue.js 使用了的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。1.1 插值。
Vue基础学习笔记Day03_计算属性_过滤器_侦听器
Li9527999qq的博客
05-02 627
今日目标: 能够了解key作用, 虚拟DOM, diff算法 能够掌握设置动态样式 能够掌握过滤器, 计算属性, 侦听器 能够完成品牌管理案例 学习内容： 学习目录: Vue基础 Vue过滤器 Vue计算属性 Vue侦听器 今日总结 面试题 知识点自测 会自己定义数据结构 "红色","red", "蓝色","blue", // 上面的数据结构, 要用1个变量来装这4个值, 用什么数据结构呢?(数组还是对象) - 对象(可映射key->value) "小明", "小蓝
Vue2：Vue2过滤器、计算属性、监听器
孤安先生的博客，作者主站正在重构中，敬请期待！
11-09 770
filter转换格式，过滤器就是一个函数，传入值返回处理后的值；当变量的值，需要通过计算得到，可以使用 computed；watch 监听 data / computed 属性值的改变。
VUE的过滤器、计算属性、侦听器的使用语法和场景
m0_61663332的博客
01-14 235
VUE的过滤器、计算属性、侦听器
vue-watch 深度监听！！
wenfu814的博客
08-30 269
watch:{} 对象，可监听数据，数据发生变化， 处理函数 目的： watch虽可监听，但只是浅监听，只监听数据第一层或者第二层， 何为第二层？ let obj = {name: ‘xx’, child: {age: 11}}; child之后的值就为第二层或者深层 实现目标: 如果 要监听一个对象中的属性，属性最高也是第二层了，watch可能监听不到， 所有要使用深度监听： watch: { ...
Vue框架学习(第五课)计算属性和监听器
qq_56248592的博客
11-18 366
Vue框架学习(第五课)computed属性和watch属性
vue基础语法
kiki208418895的博客
09-18 188
模板语法 插值：.html 1.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...
Vue基础语法(插值、指令、过滤器、 计算属性和监听属性)
byg
08-01 720
Vue基础语法 插值.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>指令</ti...
vue中过滤器的使用
weixin_46376652的博客
07-10 556
Vue.filter(name,callback) 或 new Vue({ filter:{...} }){{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"使用管道符 | 进行分割，直接使用data中的数值，管道符后再接过滤器进行操作{{time | setTime}}：time是传入的时间参数，setTime是过滤器的名字，它会将time作为参数val传入到过滤器setTime(val)中，最后将return结果替换掉整个插值语法； 当调用的时候传入了参数，第一
html页面显示list，生成下拉列表
wanglj7525的专栏
06-26 9113
HTML页面代码 %{ number = 0; }%#{list items:user,as:'user'}%{++number;}% ${user?.userName} #{/list} 数据查询，使用play框架 public static void bindUkey(){ List user = JbUkeyInfo.find("level >
vue使用自定义指令实现一键复制
Zing_ing的博客
09-09 627
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
Vue CLI：初学者指南与深入理解
最新发布
x15514104477的博客
09-10 941
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值