vue06-三种数据绑定方式

系统管理员 2022-05-10 00:04 165阅读 0赞

<!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>三种模板语法</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="app">
                <div>{
       {name}}</div>
                
                <div v-text="name"></div> 
    
                <div v-html="name"></div>
    
                <div>{
       {name + ' hot'}}</div>
                <div v-text="name+' hot'"></div> 
                <div v-html="name+ ' hot'"></div>
            </div>
    
    
            <script>
                //每个v-开头的，后面都可以去写js表达式，不仅仅是变量
                
    
                var app = new Vue({
                    el:'#app', //vue实例处理哪个dom
                    data:{   //定义数据
                        name:'<h1>hello world</h1>'
                    }
                })
            </script>
        </body>
    </html>

1.\{ \{name\}\}  插值表达式

2.v-text 与\{ \{\}\}一样

3.v-html 会解析html标签

vue每个属性都可以写js表达式，不仅仅时变量

因此可以这么写：

<div>{
       {name + ' hot'}}</div>
                <div v-text="name+' hot'"></div> 
                <div v-html="name+ ' hot'"></div>

运行效果：

![70][]

[70]: /images/20220510/ca3499cc737748199c77329589769993.png

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js框架--绑定图片几种方式

![70][] 方式一：  <img src="src/assets/logo.png" /> 方式二：

古城微笑少年丶/ 2024年02月19日 12:11/ 0 赞/ 11 阅读

相关原生JS事件绑定的三种方式

JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数，就是处理用户操作的函

冷不防/ 2022年12月29日 14:25/ 0 赞/ 284 阅读

相关 Vue数据绑定

> 单向绑定模式 v-bind：之前说的指令语法只是说了一个 v-bind：及其简写模式：，但是 v-bind：是一个单向绑定模式，只能将data中的数据解析到页面上

Myth丶恋晨/ 2022年08月28日 10:54/ 0 赞/ 178 阅读

相关 javascript实现数据双向绑定的三种方式

前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据

╰+哭是因爲堅強的太久メ/ 2022年07月13日 02:13/ 0 赞/ 140 阅读

相关 Vue数据绑定

[gitHub地址:https://github.com/manlili/vue\_learn里面lesson04][gitHub_https_github.com_manli

柔情只为你懂/ 2022年06月17日 13:39/ 0 赞/ 200 阅读

相关 DOM绑定事件的三种方式

参考[事件绑定原理][Link 1] 1. 在DOM中绑定。在DOM中绑定有两种方式: 直接在html中onXxxx = "jsCode" 在html中on

旧城等待，/ 2022年05月25日 14:11/ 0 赞/ 199 阅读

相关 Vue 数据绑定

数据绑定就是将页面的数据和视图关联起来，当我们的数据变化的时候，视图可以自动更新。插值文本插值是数据绑定的最基本形式，使用双花括号“\{ \{ \}\}”,这种语法在

叁歲伎倆/ 2022年05月22日 11:52/ 0 赞/ 176 阅读

相关 vue06-三种数据绑定方式

<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8"/

系统管理员/ 2022年05月10日 00:04/ 0 赞/ 166 阅读

相关 Vue绑定class的几种方式

1. 对象语法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

淡淡的烟草味﹌/ 2021年09月27日 13:28/ 0 赞/ 260 阅读

相关 Repeater控件绑定的三种方式

方式一在`aspx`页面，写好需要循环输出的内容，一般包含用户自定义控件、服务器控件、`Html`格式的片段、和`<% Eval("Name")%>`这种方式来动态显示

墨蓝/ 2021年07月04日 20:27/ 0 赞/ 369 阅读