zoukankan      html  css  js  c++  java
  • 5、插值

    1、文本插值

    1.1.  {{}}语法

    1、数据绑定最常见的形式就是使用双大括号的文本插值。如果数据对象上username属性发生了改变,插值处的内容就会更新。

    2、插值是单向绑定,数据对象发生变化会体现在插值上,但是插值的变化不会体现在数据对象上面。

     

    1.2.  v-text指令

    使用双大括号插值,如果Vue没有完成对页面的渲染,用户是会短暂看到插值表达式的,解决这个问题可以使用v-text指令。从体验上来说,推荐使用v-text指令。

     

    1.3.  v-once指令

    使用v-once指令,你可以执行一次性的插值,当数据对象发生改变时,插值处的内容不会更新。

     

    2、HTML插值(v-html)

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

     

    注意:被插入的内容会被当做HTML,数据绑定会被忽略,如下图

     

    这里的{{url}}不会被数据绑定,会作为文本输出。

    还有,只对可信内容使用HTML插值,绝不要对用户提供的内容插值,除非对内容过滤,否则很容易引起XSS攻击。

     

    3、属性插值(v-bind)和表达式

       之前我们学习的文本插值和html插值,他们都是将数据模型中的数据输出到html内容,但是如果我们想要模型层的数据输出到控件的属性上,我们应该用什么语法实现呢?

       如果要对HTML元素属性插值,应该使用v-bind指令。

     

    V-bind指令后面要加上要插值的控件属性,比如本例中的disabledclass

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

     

  • 相关阅读:
    POJ 2348 Euclid's Game【博弈】
    POJ 2484 A Funny Game【博弈】
    HDU 4193 Non-negative Partial Sums【单调队列】
    占坑补题
    Codeforces 658D Bear and Polynomials【数学】
    Codeforces 658C Bear and Forgotten Tree 3【构造】
    Codeforces 658B Bear and Displayed Friends【set】
    POJ 1704 Georgia and Bob【博弈】
    1001. A+B Format

  • 原文地址:https://www.cnblogs.com/schangxiang/p/11381410.html
Copyright © 2011-2022 走看看