Vue 指令01——v-test和v-html的使用

简介: Vue 指令01——v-test和v-html的使用

Vue 指令01——v-test和v-html的使用


V-test指令

作用:替换标签里的文本内容


v-test的实例

<!--程序1-->
 <!--把h2标签的”1234“,替换成”笑哈哈“-->
<div>
    <h2 v-text="message">1234</h2>
</div>
<!--程序2-->
 <!--把h2标签的”12“,替换成”笑哈哈“ ,并加上”哭兮兮“-->
<div>
    <h2>12{{message+'哭兮兮'}}</h2>
</div>

 

var app=new Vue({
    el:"#app",
    data:{
        message:"笑哈哈"
    }
})

 

v-html指令

作用:在标签内容替换成标签


v-html的实例

<!--把h2标签的”1234“,替换成”a标签链接到百度“-->
<div>
    <h2 v-html="message">1234</h2>
</div>
var app=new Vue({
    el:"#app",
    data:{
        message:"<a scr='https://www.baidu.com'>百度</a>"
    }
})
相关文章
|
10天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
10天前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
8 2
|
21天前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
23天前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
27 1
|
23天前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
54 1
|
2月前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
19天前
|
人工智能 JavaScript 程序员
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持
84 0
|
19天前
|
JavaScript 算法 前端开发
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
在Vue开发中v-if指令和v-show指令的使用介绍,v-if和v-for的优先级以及使用注意事项的介绍
11 0
|
19天前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
28 0
|
6月前
|
JavaScript
Vue中的v-bind指令的用法有哪些?
Vue中的v-bind指令的用法有哪些?
178 37