zoukankan      html  css  js  c++  java
  • Vue 学习笔记3 v-text v-html

    v-text

    设置标签的文本值(textContent)

    <h3 v-text="message"></h3>
    

    可以进行拼接操作,如:

    <h3 v-text="message+'123'"></h3>
    

    v-html

    设置标签的innetHTML

    <h3 v-html="content"></h3>
    

    完整代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Lesson 3 v-text v-html</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <p v-text="message"></p>
            <p v-text="message+'!!'"></p>
            <p v-html="content"></p>
        </div>
        <script>
            let tmp = new Vue({
                el: "#app",
                data: {
                    "message": "Hello Vue",
                    "content": "<a href='https://www.bilibili.com' target='blank'>哔哩哔哩</a>"
                }
            })
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    js中级-函数封装
    js中级-11.7
    js中级-11.5
    js中级-11.2
    js中级-this
    js中级-作用域链
    10.23
    10.22
    10.19js
    10.18
  • 原文地址:https://www.cnblogs.com/congxinglong/p/13524186.html
Copyright © 2011-2022 走看看