Kissship
Kissship

Vue模板语法（上）

目录

一、插值

1.1 文本

1.2 html解析

1.3 表达式

二、指令

2.1 定义

2.2 常用指令

2.3 效果演示

2.3.1 v-if与v-show

2.3.2 v-for

2.3.3 下拉框

2.3.4 v-if/v-else-if/v-else 

2.3.5 多选框

2.3.6 动态参数

2.4 好处

三、过滤器

3.1 定义

3.2 用途

3.3 常用过滤器

3.4 效果演示

四、计算属性与监听属性

4.1 计算属性

4.2 监听属性

 4.3 利用Vue计算属性实现购物车功能

Vue模板语法（上）_第1张图片

一、插值

插值 Vue.js使用双大括号{{ }}来执行插值操作，将数据渲染到HTML中。

1.1 文本

代码如下：



	
		
		插值
		
		
	
	
		

		
文本

		{{msg}}

效果如下：

Vue模板语法（上）_第2张图片

1.2 html解析

代码如下：



	
		
		插值
		
		
		
	
	
		

		
文本

		{{msg}} 
		
html解析

		{{msg2}}

 效果如下：

Vue模板语法（上）_第3张图片

1.3 表达式

 代码如下：



	
		
		插值
		
		
		
	
	
		

		
文本

		{{msg}} 
		
html解析

		{{msg2}} 

		
		
表达式

		{{num+1}}
		{{warn.substr(0,14)}}
		
		{{ok == 1 ? '必去武功山':'衡山不配了'}}

效果如下：

Vue模板语法（上）_第4张图片

二、指令

2.1 定义

Vue指令是用于对DOM元素进行操作的特殊属性。指令以 v- 前缀作为标识，通过在HTML模板中使用指令，可以直接在DOM元素上添加特定的行为和功能。

2.2 常用指令

Vue中常用的内置指令有以下几个：

  1. v-bind 或简写为 : 用于动态绑定属性值，将表达式的值绑定到元素的属性上。例如，:src="imageUrl" 将会将 imageUrl 的值作为 src 属性绑定到元素上。

  2. v-if 根据条件决定是否渲染元素。表达式为真时，元素会被渲染到DOM中；为假时，元素会从DOM中移除。

  3. v-for 用于循环渲染列表数据，可以遍历数组或对象。例如，v-for="item in items" 可以循环遍历 items 数组，生成对应的元素。

  4. v-on 或简写为 @ 用于绑定事件监听器，当指定的事件被触发时，执行相应的事件处理函数。例如，@click="handleClick" 将会在点击事件触发时执行 handleClick 方法。

  5. v-model 用于实现表单元素和数据的双向绑定。它会根据元素的类型自动选取正确的方式进行数据绑定，比如 和