本文介绍了Vue.js 常用模板语法，分享给大家，具体如下：

一、文本渲染

Vue支持动态渲染文本，即在修改属性的同时，实时渲染文本内容。同时为了提高渲染效率，也支持只渲染一次，即第一次渲染出文本后，文本内容不再跟随属性值的变化而变化。

实时渲染

 <div class="row">
  <h2>文本 - 实时渲染</h2>
  <input type="text" v-model="msg" class="col-md-2" />
  <span class="col-md-">{{ msg }}</span>
 </div>

 v-model 指令将 input 标签的值动态绑定到属性 msg 上，通过 {{ msg }} 表达式显示在页面上。当修改文本框内容时，后面的页面内容将实时变化并与文本框内容保持一致。

一次渲染

 <div class="row">
  <h2>文本 - 一次渲染</h2>
  <input type="text" v-model="msg_once" class="col-md-2" />
  <span class="col-md-" v-once>{{ msg_once }}</span>
 </div>

在 vm 对象里添加属性

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       msg_once: "once..."
     }
   });
 });

页面第一次加载完成时，页面显示once...，当 span 标签加上 v-once 指令后，无论如何修改文本框内容，页面内容都不会变化。

HTML代码渲染

某些情况下，页面需要动态的插入一段HTML代码

在 vm 对象里添加属性，属性值为一段HTML代码

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       html: "<span>This is a html tag.</span>"
     }
   });
 });

页面元素添加 v-html 指令后，元素对应位置将显示出属性值内的对应元素

 <div class="row">
  <h2>文本 - HTML</h2>
  <div v-html="html"></div>
 </div>

二、表达式

上文中已经介绍过的 {{ msg }} 就是一个简单的表达式。除此之外，还有一些常用的表达式写法。

运算表达式

在上述简单表达式中可以使用运算符，Vue会将运算后的结果渲染在页面上

 <div>
  <h4>运算表达式</h4>
  <span v-pre>{{ Number(number)+ }}：</span>
  <input v-model="number" type="text" />
  <span>运算结果：{{ Number(number)+ }}</span>
 </div>

在文本框中输入数字，Vue通过表达式内的运算符实时计算出结果，并显示出来。因为文本框内容为字符串，所以在表达式中需要对 number 属性进行类型转换成数字。

三元运算表达式

Vue支持在表达式内使用三元运算符

 <div>
  <h4>三元运算表达式</h4>
  <span v-pre>{{ ok ? 'YES' : 'NO' }}：</span><span>{{ ok ? 'YES' : 'NO' }}</span>
 </div>

Javascript方法

表达式内也可以使用Javascript支持的基础方法，Vue会动态执行方法并显示最终结果

 <div>
  <h4>Javascript方法</h4>
  <span v-pre>{{msg_once.split('').reverse().join('')}}：</span><span>{{msg_once.split('').reverse().join('')}}</span>
</div>

这个例子是将 msg_once 属性值的字符进行倒序排列后重新组合起来。

三、过滤器

过滤器经常用来进行内容的格式化显示。Vue支持自定义过滤器

首先要在 vm 对象里增加过滤器方法

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       filter_msg: 'base'
     },
     filters: {
       filter: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter1';
       },
       filter2: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter2';
       },
       filter_arg: function (value, arg1, arg2) {
         if (!value) {
           return '';
         }
 
         return value + ' ' + arg1 + ' ' + arg2;
       }
     }
   });
 });

所有的过滤器方法都要定义在 filters 属性里，方法的第一个参数值就是传递进来需要被处理的原始内容，方法的返回值即时处理过的新内容。

自定义的过滤器使用方法如下

<div>
  <h4>单一过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>
 </div>

上面的例子中，过滤器通过管道符号“|”与需要处理的内容进行连接，将 filter_msg 属性值经过 filter1 过滤器，在后面追加内容并显示。

同时，Vue也支持连接多个过滤器

 <div>
  <h4>串联过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>
 </div>

这个例子中，通过管道符号“|”，可以连接多个过滤器，每前一个过滤器的输出将作为后一个过滤器的输入，直到显示最终结果。

当过滤器有多个参数时，Vue也支持带参数调用

 <div>
  <h4>过滤器参数</h4>
  <span v-pre>{{ filter_msg | filter_arg('arg1', 'arg2') }}：</span><span>{{ filter_msg | filter_arg('arg1', 'arg2') }}</span>
 </div>

 四、常用指令

指令就是将一些特殊行为应用到页面DOM元素的特殊属性。Vue的内置指令都是一些带有 v- 前缀的特殊属性。

常用的指令如下：

• v-bind
• v-on
• v-for
• v-if
• v-else-if
• v-else
• v-show

v-bind

该指令用来给元素绑定一个或多个特性

 <div>
  <h>v-bind（属性绑定）</h>
  <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/>
  <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/>
  <span v-pre>缩写(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以点击的按钮</button>
 </div>

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       btn_enabled: true
     }
   });
 });

在上面的例子里，给 vm 对象增加一个名称为 btn_enabled 的布尔属性，在按钮中通过 v-bind:disabled="btn_enabled" 动态给 disabled 属性赋值

页面上可以看到“不能点击的按钮”动态增加了一个 disabled 属性。同时 v-bind:disabled="!btn_enabled" 也可以简写成 :disabled="!btn_enabled" 。

v-on

该指令绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。用在普通元素上时，只能监听原生 DOM 事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性。

在 vm 对象的 methods 属性里添加自定义方法

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     methods: {
       btn_click: function () {
         console.log("button click!");
       },
       btn_clickWithEvent: function($event){
         console.log($event);
       },
       btn_clickWithMsg: function (msg) {
         console.log("Message is:" + msg);
       }
     }
   });
 });

通过属性 v-on:click="btn_click" 在按钮上添加 click 事件

 <div>
  <h4>v-on（事件绑定）</h4>
  <span v-pre>点击事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">点我！</button><br/>
  <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我！</button><br/>
  <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg('Hello world!')")：</span><button v-on:click="btn_clickWithMsg('Hello world!')" type="button">点我！</button><br/>
  <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button>
 </div>

页面效果如下

v-on指令也支持缩写，用@符号代替，比如： @click="btn_click" 。

v-for

该指令用来基于源数据多次渲染元素或模板块。

在 vm 对象里添加一个数组类型的属性 books

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       books: ["深入浅出node", "C#本质论", "编程珠玑"]
     }
   });
 });

通过 v-for 指令实现一个简单列表

 <div>
  <h4>v-for（循环）</h4>
  <ul>
    <li v-for="item in books">
     {{ item }}
    </li>
  </ul>
 </div>

页面效果如下

 v-for 属性值是一个 item in expression 结构的表达式，其中 item 代表 expression 运算结果的每一项。最终的HTML代码如下

v-if、v-else-if、v-else

条件渲染指令，通过表达式结果的真假来插入和删除元素。 v-if 可以单独使用，而 v-else-if 、 v-else 必须和 v-if 一起使用。

下面是一个简单用法的例子

 <div>
  <h4>v-if、v-else-if、v-else（分支）</h4>
  <span>分支示例：</span>
  <input type="text" v-model="number" />
  <span v-if="number>10">大于10</span>
  <span v-else-if="number==10">等于10</span>
  <span v-else>小于10</span><br/>
 </div>

页面显示如下

当文本框里输入小于10的数字时，右侧只显示“小于10”的文本内容。

查看源码发现，只有“小于10”的内容的 span 标签存在，另外两个标签被插入到页面中。

同样，在输入大于10的数字时，右侧只显示“大于10”的文本内容。而源码里只有对应的 span 标签存在。

v-show

该指令也是条件渲染指令，但是与上述的 v-if 有不同。这可以通过一个例子来说明。

 <div>
  <h4>v-show（条件渲染）</h4>
  <span>v-show示例：</span>
 <input type="text" v-model="number" />
  <span v-show="number>10">大于10</span>
  <span v-show="number==10">等于10</span>
  <span v-show="number<10">小于10</span><br/>
 </div>

将上面例子里的指令都换成 v-show ，页面显示如下

从页面显示的结果上看，没有任何区别。但是查看源码会发现，符合表达式结果判断的元素内容将被显示，不符合结果判断的元素将被隐藏，即被加上 display: none; 的样式。

从上面两个例子对比可以看出

1. v-if：动态插入或删除元素
2. v-show：动态显示或隐藏元素

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue.js  # 常用模板语法 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  音响网站制作视频教程,隆霸音响官方网站？  如何在新浪SAE免费搭建个人博客？  利用python获取某年中每个月的第一天和最后一天  Laravel如何使用Blade组件和插槽？（Component代码示例）  浅谈javascript alert和confirm的美化  公司网站制作需要多少钱,找人做公司网站需要多少钱？  iOS发送验证码倒计时应用  深圳网站制作平台,深圳市做网站好的公司有哪些？  Python数据仓库与ETL构建实战_Airflow调度流程详解  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  Laravel中的withCount方法怎么高效统计关联模型数量  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  如何在IIS中新建站点并解决端口绑定冲突？  Laravel distinct去重查询_Laravel Eloquent去重方法  七夕网站制作视频,七夕大促活动怎么报名？  Laravel的路由模型绑定怎么用_Laravel Route Model Binding简化控制器逻辑  如何用低价快速搭建高质量网站？  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  lovemo网页版地址 lovemo官网手机登录  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  Laravel如何实现多对多模型关联？（Eloquent教程）  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  微信小程序 五星评分(包括半颗星评分)实例代码  如何快速辨别茅台真假？关键步骤解析  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  如何用搬瓦工VPS快速搭建个人网站？  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  5种Android数据存储方式汇总  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  教你用AI将一段旋律扩展成一首完整的曲子  如何用AI帮你把自己的生活经历写成一个有趣的故事？  Laravel怎么进行浏览器测试_Laravel Dusk自动化浏览器测试入门  nginx修改上传文件大小限制的方法  想要更高端的建设网站，这些原则一定要坚持！  如何用腾讯建站主机快速创建免费网站？  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  魔方云NAT建站如何实现端口转发？  教学论文网站制作软件有哪些,写论文用什么软件 ？