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>"
    }
})
相关文章
|
4天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
8天前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
20 0
react字符串转为dom标签,类似于Vue中的v-html
|
2月前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
307 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
2月前
|
JavaScript 前端开发 安全
svg图片hover变色,居然只用一个vue指令就可以搞定!千万别在写两个控制显影了!
【8月更文挑战第22天】svg图片hover变色,居然只用一个vue指令就可以搞定!千万别在写两个控制显影了!
169 3
|
2月前
|
资源调度 JavaScript 应用服务中间件
HTML、WebStrom和Vue使用
HTML、WebStrom和Vue使用
22 3
|
2月前
|
JavaScript 前端开发 安全
Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】(2022/7/19)
这篇文章详细介绍了Vue中常见的内置指令,如v-bind、v-model、v-for、v-on、v-if、v-else、v-show、v-text和v-html等,并通过代码示例演示了它们的使用和效果。
Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】(2022/7/19)
|
2月前
|
JavaScript 前端开发
基于Vue实现具有固定表头、合并单元格的Html表格
本文介绍了如何在Vue框架中创建一个具有固定表头和合并单元格功能的HTML表格,通过CSS的`position: sticky`属性实现表头固定,并通过设置`rowspan`和`colspan`属性来实现单元格合并。
17 0
基于Vue实现具有固定表头、合并单元格的Html表格
|
2月前
|
JSON JavaScript 数据格式
Vue常用的指令都有哪些?
常用指令: 1、v-model 多用于表单元素实现双向数据绑定 (同angular中的ng-model) 2、v-for格式: v-for="字段名in(of)数组json"循环数组或json(同angular中的ng repeat),需要注意从vue2开始取消了$index 3、v-show
22 6
|
3月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
下一篇
无影云桌面