Vue中的v-bind,v-text,v-html, v-model, {{}}

    xiaoxiao2022-07-02  67

    1.v-bind

    可以将vue变量值和html标签属性绑定起来

    2.v-text

    v-text是用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。其中:v-text可以简写为{{}},并且支持逻辑运算。

     

    3.v-html

    v-html用于输出html,它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。

    <div id="app"> <p v-html="html"></p> </div> let app = new Vue({ el: "#app", data: { html: "<b style='color:red'>v-html</b>" } });

    4.v-model

    v-model通常用于表单组件的绑定,例如input,select等。它与v-text的区别在于它实现的表单组件的双向绑定,如果用于表单控件以外标签是没有用的。

    <div id="app"> <input v-model="message " /> </div> var app = new Vue({ el : '#app', data : { message : 'hello world' } })

    5.{{ }}

    {{ }}是v-text的简写形式

    (转自 yummyH)

    最新回复(0)