星星博客 »  > 

vue基础课程学习之模板语法(四)

插值

#文本

       数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值

<span>Message:{{msg}}</span>

Mustache标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生改变,插值处的内容都会更新。

 

当然,通过v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其他数据绑定。

<span v-once>这个将不会改变: {{ msg }}</span>

 

#原始HTML

       双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML代码,需要使用 v-html 指令:

浏览器:

这个span 的内容将会被替换成为property值 htmlMsg,直接作为HTML—会忽略解析property值中的数据绑定。注意,你不能使用 v-html 指令来解析符合局部模板,因为vue不是基于字符串的模板引擎。反之,对于用户界面(UI),组件更适合作为可重用和可组合的基本单位。

       你的站点上动态渲染的任意HTML可能会非常危险,因为它很容易导致xss攻击。请只对可信内容使用html插值,绝不要对用户提供的内容使用插值

#Attribute(特性)

       Mustache语法不能作用在HTML Attribute上,遇到这种情况应该使用v-bind指令

如Id、clas、其他属性值

<button v-bind:disabled="isButtonDisabled">Button</button>

#使用 JavaScript 表达式

       迄今为止,在我们的模板中,我们一直都只绑定简单的 property 键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

<!-- 这是语句,不是表达式 -->

{{ var a = 1 }}

 

<!-- 流控制也不会生效,请使用三元表达式 -->

{{ if (ok) { return message } }}

 

总体代码:

<!DOCTYPE html>

<html>

       <head>

              <meta charset="utf-8">

              <title>Demo3</title>

              <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

       </head>

       <body>

              <div id="app">

                     <span v-once>Message:{{msg}}</span>

                     <div>使用 mustaches :{{htmlMsg}}</div>

                     <div>使用 v-html 指令: <span v-html="htmlMsg"></span></div>

                     <button v-bind:disabled="isButtonDisabled">Button</button>

                     <div>{{ number + 1 }}</div>

                     <div>{{ number2 + 1 }}</div>

                     <div>{{ ok ? 'YES' : 'NO' }}</div>

                     <div>{{ ok2 ? 'YES' : 'NO' }}</div>

                     <div>{{ msg.split('').reverse().join('') }}</div>

                     <div v-bind:id="'list-' + id"></div>

              </div>

       </body>

       <script type="text/javascript">

              var vm = new Vue({

                     el:'#app',

                     data:{

                            msg:'Hello World',

                            htmlMsg:'<span style="color: red;">这是Html代码</span>',

                            isButtonDisabled:false,

                            id :'app-2',

                            number:1,

                            number2:'2',

                            ok:true,

                            ok2:false

                     }

              })

             

       </script>

</html>

 

最后是交流公众号,大家可以关注一下

 

相关文章