Vue模板里有哪些语法

Sharp丶TJ 2023-03-28 原文

在这里，我们说模板就是特指表示HTML结构的字符串，英文来说就是 template

一、展示内容

1、表达式

{{ object.a }} // 表达式
{{ n+1 }} // 可以写任何运算
{{ fn(n) }} // 可以调用函数 （一般在methods里面找到函数且调用）

如果值为 undefined 或 null 就不显示，这是经过Vue处理的
另一种写法为

<div v-text="表达式"></div>

2、HTML内容

假设 data.x 值为 <strong>hi</strong>

<div v-html="x"></div> 即可显示粗体的 hi

3、就想展示{{ n }} 的花括号的话

如：<div v-pre>{{ n }}</div>

就添加：v-pre 因为它不会对模板进行编译

二、绑定属性

1、绑定 src

<img v-bind:src="x" />

可以简写为：

<img :src="x" />

2、绑定对象

<div
        :style="{border:'1px solid red', height:100}">
    </div>

这里把'100px'写成100，Vue默认即为100为100px，当需要100em时，自己需要写100em

三、绑定事件

方法：v-on:事件名
可以缩写为： @事件名
不同的三种方式：
例如：
1、

<button v-on:click="add">-1</button>
//点击之后，Vue会运行 add()
<button @click="add">-1</button>//这是缩写

2、

<button v-on:click="xxx(1)">-1</button>
//点击后，Vue会运行 xxx(1)

PS：如果xxx(1)返回一个函数，怎么办呢？
那就直接把xxx(1)的这个函数给赋值到一个变量，比如：赋值给一个add，然后就直接写add就好了。但是不推荐这样用。
3、

<button v-on:click="n+=1">xxx</button>
//点击后，Vue会运行 n+=1

总结：如果发现函数就加个括号调用，否则就直接运行代码

四、条件判断

    <div v-if="x>0">
        x 大于 0
    </div>

    <div v-else-if="x===0">
        x 为 0
    </div>

    <div v-else>
        x 小于 0
    </div>

五、循环

for(value,key) in 对象或数组

    //数组例子
    <ul>
        <li v-for="(u,index) in users" :key="index">    //后面这个 :key="xxx" 必须写，不然会报错
            索引:{{index}} 值:{{u.name}}
        </li>
    </ul>
    //对象例子
    <ul>
        <li v-for="(value,name) in obj" :key="name">    //key后面最好放一个唯一性的值进去
            属性名:{{name}} 属性值:{{name}}
        </li>
    </ul>

六、显示、隐藏

v-show

    <div v-show="n%2===0">
        n 是偶数
    </div>
//真就显示，假就不显示

总结：
Vue模板的主要特点：
使用 XML 语法
使用{{}}插入表达式
使用v-html 、 v-on 、-v-bind 等指令操作DOM
使用v-if 、 v-for 等指令实现条件判断和循环

有关Vue模板里有哪些语法的更多相关文章

ruby - 树顶语法无限循环 - 2
我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He
ruby - 通过 erb 模板输出 ruby 数组 - 2
我正在使用puppet为ruby程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby - 覆盖相似的方法，更短的语法 - 2
在Ruby类中，我重写了三个方法，并且在每个方法中，我基本上做同样的事情:classExampleClassdefconfirmation_required?is_allowed&&superenddefpostpone_email_change?is_allowed&&superenddefreconfirmation_required?is_allowed&&superendend有更简洁的语法吗？如何缩短代码？最佳答案如何使用别名？classExampleClassdefconfirmation_required?is_a
ruby 语法糖 : dealing with nils - 2
可能已经问过了，但我找不到它。这里有2个常见的情况(对我来说，在编程Rails时......)用ruby编写是令人沮丧的:"astring".match(/abc(.+)abc/)[1]在这种情况下，我得到一个错误，因为字符串不匹配，因此在nil上调用[]运算符。我想找到的是比以下内容更好的替代方法:temp="astring".match(/abc(.+)abc/);temp.nil??nil:temp[1]简而言之，如果不匹配，则简单地返回nil而不会出错第二种情况是这样的:var=something.very.long.and.tedious.to.writevar=some
ruby - Ruby 语法糖有 "rules"吗？ - 2
我正在学习Ruby的基础知识(刚刚开始)，我遇到了Hash.[]method.它被引入a=["foo",1,"bar",2]=>["foo",1,"bar",2]Hash[*a]=>{"foo"=>1,"bar"=>2}稍加思索，我发现Hash[*a]等同于Hash.[](*a)或Hash.[]*一个。我的问题是为什么会这样。是什么让您将*a放在方括号内，是否有某种规则可以在何时何地使用“it”？编辑:我的措辞似乎造成了一些困惑。我不是在问数组扩展。我明白了。我的问题基本上是:如果[]是方法名称，为什么可以将参数放在括号内？这看起来几乎——但不完全是——就像说如果你有一个方法Foo.d
ruby-on-rails - Mandrill API 模板 - 2
我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ruby - 如何让Ruby捕获线程中的语法错误 - 2
我正在尝试使用ruby编写一个双线程客户端，一个线程从套接字读取数据并将其打印出来，另一个线程读取本地数据并将其发送到远程服务器。我发现的问题是Ruby似乎无法捕获线程内的错误，这是一个示例:#!/usr/bin/rubyThread.new{loop{$stdout.puts"hi"abc.putsefsleep1}}loop{sleep1}显然，如果我在线程外键入abc.putsef，代码将永远不会运行，因为Ruby将报告“undefinedvariableabc”。但是，如果它在一个线程内，则没有错误报告。我的问题是，如何让Ruby捕获这样的错误？或者至少，报告线程中的错误？
ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2
所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP