Vuejs之路之--模板语法（）

来源：互联网发布：seo软文写作技巧编辑：程序博客网时间：2024/06/06 03:12

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue指令和插值</title></head><body><div class="container" id="outBox"><!-- 文本： v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。 --><div class="ban" v-once>{{infor.name}}</div><!-- 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：类似于下面，注意v-html的值是你想要输出的值，这个值前提是标签字符串 --><div class="ban" v-html = "infor.third"></div><!-- Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令来绑定属性 v-bind:属性名 = 属性值，具体如下 --><input type="text" name="poem" v-bind:placeholder = "infor.sec"><button v-bind:disabled= "!infor.judge">{{infor.name}}</button><!-- javascript 表达式 --><div>{{infor.name+"adafa"}}</div><!-- 三元表达式：当infor.judge是真的时候显示infor.name否则显示infor.sec,条件判断只能是三元表达式 --><div style="color: red">{{infor.judge?infor.name:infor.sec}}</div><!-- javascript处理表达式，应该还有更多的想象，敬请关注 --><h1>{{infor.ABC.split("").join(",")+Math.random()}}</h1><!-- 指令:一些指令能接受一个“参数”，在指令后以冒号指明,例如v-on指令v-on：click等等 --><a v-bind:href = "infor.href1" v-if = "infor.judge">百度一下</a><!-- 修饰符 --><!-- 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()： 对于下面的例子submit是事件名，.prevent是修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault(),在执行onSubmit函数的时候-->

<form v-on:submit.prevent="onSubmit"></form></div><script type="text/javascript" src = "https://unpkg.com/vue"></script><script type="text/javascript" src = "js/init.js"></script></body></html>

虽然只是Vue指令中的一部分，但是却依然有意义，更多指令还在后面呢，对于其中一些指令的理解已经在上面注释清楚了，以作回顾......

阅读全文

0 0