Vue-v-text和v-html的使用

1.v-text:用来获取data中数据将数据已文本的形式渲染到指定标签内部,类似于javascript中的innerText
{{}}(插值表达式)与v-text的区别:
a.v-tetx取值会将标签中原有的数据覆盖,使用插值表达式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境比较差的情况下出现插值闪烁


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <span>{{msg}},admin!span>
    <br>
    <span v-text="msg">就是就是的就是span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:"你好"

        }
    })
script>
body>
html>

Vue-v-text和v-html的使用_第1张图片
2.v-html:用来获取data中的数据,将数据中含有的HTML标签先解析再渲染到指定标签的内部,类似JavaScript中的innerHTML。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <span>{{msg}},admin!span>
    <br>
    <span v-text="msg">就是就是的就是span>
    <span>{{message}}span>
    <br>
    <span v-html="message">三生三世span>//v-html也会覆盖标签原始的值


div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            msg:"你好",
            message:"百度一下"

        }
    })
script>
body>
html>

Vue-v-text和v-html的使用_第2张图片

你可能感兴趣的:(vue-前后端分离,vue)