v-html
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用 v-html,永不用在用户提交的内容上
-
它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<
div
id
=
"app"
>
<
p v
-
html
=
"html"
>
<
/
p
>
<
!
-- 输出:html标签在渲染的时候被解析 -->
<
p
>
{
{
message
}
}
<
/
p
>
<
!
-- 输出:<span>通过双括号绑定</span> -->
<
p v
-
text
=
"text"
>
<
/
p
>
<
!
-- 输出:<span>html标签在渲染的时候被源码输出</span> -->
<
/
div
>
<
script
>
let app
=
new
Vue
(
{
el
:
"#app"
,
data
:
{
message
:
"<span>通过双括号绑定</span>"
,
html
:
"<span>html标签在渲染的时候被解析</span>"
,
text
:
"<span>html标签在渲染的时候被源码输出</span>"
,
}
}
)
;
<
/
script
>
- v-pre
-
显示原始信息跳过编译过程
-
跳过这个元素和它的子元素的编译过程。
-
一些静态的内容不需要编译加这个指令可以加快渲染
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
<
span v
-
pre
>
{
{
this will
not
be compiled
}
}
<
/
span
>
<
!
-- 显示的是{{ this will not be compiled }} -->
<
span v
-
pre
>
{
{
msg
}
}
<
/
span
>
<
!
-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->
<
script
>
new
Vue
(
{
el
:
'
#app',
data
:
{
msg
:
'Hello Vue.js'
}
}
)
;
<
/
script
>
- v-once
-
执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
<
!
-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js -->
<
span v
-
once
>
{
{
msg
}
}
<
/
span
>
<
script
>
new
Vue
(
{
el
:
'
#app',
data
:
{
msg
:
'Hello Vue.js'
}
}
)
;
<
/
script
>
- 双向数据绑定
-
当数据发生变化的时候,视图也就发生变化
-
当视图发生变化的时候,数据也会跟着同步变化
-
v-model是一个指令,限制在 <input>、<select>、<textarea>、components中使用
-
[AppleScript] 纯文本查看 复制代码
1
2
3
4
5
6
7
<
div
id
=
"app"
>
<
div
>
{
{
msg
}
}
<
/
div
>
<
div
>
当输入框中内容改变的时候, 页面上的msg 会自动更新
<
input type
=
"text"
v
-
model
=
'msg'
>
<
/
div
>
<
/
div
>
-
-
-