内容渲染
在Vue中渲染元素,用双花括号{{}}的语法进行插值,称之为插值表达式
双花括号会渲染hi里面的值
html
<body>
<div id="app">
{{hi}}
</div>
<script>
const vm={
data(){
return{
hi:'hello world'
}
}
}
const app=Vue.createApp(vm)
app.mount('#app')
</script>
</body>
同时它也能执行js代码
html
<body>
<div id="app">
{{one+1}}
</div>
<script>
const vm={
data(){
return{
one:1
}
}
}
const app=Vue.createApp(vm)
app.mount('#app')
</script>
</body>
对算式进行计算
由于用双花括号无法解析标签元素,它只会将它当作damn变量的值
html
<body>
<div id="app">
{{damn}}
</div>
<script>
const vm={
data(){
return{
damn:'<a href="www.csdn.net">csdn</a>'
}
}
}
const app=Vue.createApp(vm)
app.mount('#app')
</script>
</body>
内容渲染指令
v-text:不会解析标签,比较少用
v-html:会解析html元素,常用
html
<body>
<div id="app">
<!--v-text覆盖掉原先的内容,但并不会解析标签-->
<p v-text="damn">hello world</p>
<!--v-text覆盖掉原先的内容,但并不会解析标签-->
<p v-html="damn">hello world</p>
</div>
<script>
const vm={
data(){
return{
damn:'<a href="www.csdn.net">csdn</a>'
}
}
}
const app=Vue.createApp(vm)
app.mount('#app')
</script>
</body>
属性绑定指令
html
<body>
<div id="app">
<!--v-bind属性绑定,可以在属性前面只加分号:-->
<p><a v-bind:href="link">csdn</a></p>
<a :href="link">csdn</a>
</div>
<script>
const vm={
data(){
return{
link:'www.csdn.net'
}
}
}
const app=Vue.createApp(vm)
app.mount('#app')
</script>
</body>
两种方式效果都是一样的 ,会将link的值渲染到超链接上