v-html和v-text的区别,vue 之 v-text、v-html、v-pre 三个指令的区别

vue 之 v-text、v-html、v-pre 三个指令的区别

1、 v-text 填充纯文本

相比插值表达式更加简洁，而且可以解决文字闪动问题

2、v-html 填充HTML片段

2.1、存在安全问题

2.2、本网站内部数据可以使用，来自第三方的数据最后不要用

3、v-pre 填充原始数据

3.1 显示原始信息，跳过编译过程(分析编译过程)

实例代码如下：

1 、vue v-text和插值表达式对比

vue v-text和插值表达式对比 xinbiancheng.cn

{{msg}}

var vm = new Vue({

el:'#app',

data:{

msg:'

v-text和插值表达式对比

'

}

})

显示结果如下：

v-text和插值表达式对比

v-text和插值表达式对比

总结：v-text 和插值表达式显示的结果一样，这个没有双大括号的闪动问题

2、vue v-text和v-html对比

vue v-text和v-html对比 xinbiancheng.cn

var vm = new Vue({

el:'#app',

data:{

msg:'

v-text和v-html对比

'

}

})

显示结果如下：

v-text和v-html对比

v-text和v-html对比

总结：v-text是以文字的方式进行显示的，以上的v-html是以html的h2的标题的方式进行显示的

3、vue v-pre和插值表达式对比

vue v-pre和插值表达式对比 xinbiancheng.cn

{{msg}}

{{msg}}

var vm = new Vue({

el:'#app',

data:{

msg:'v-pre 指令和插值表达式的对比'

}

})

显示结果如下：

{{msg}}

v-pre 指令和插值表达式的对比

总结：v-pre指令原始是什么样子，就原始的不变方式显示，不进行编译，例如想显示css的原始代码用v-pre就比较合适，而插值表达式显示的是，变量的值