首页 > 其他分享 >Vue之v-text指令

Vue之v-text指令

时间:2022-12-24 17:44:53浏览次数:40  
标签:Vue 渲染 text 指令 动态控制 节点

我们学过的指令:                         v-bind  : 单向绑定解析表达式, 可简写为 :xxx                         v-model : 双向数据绑定                         v-for   : 遍历数组/对象/字符串                         v-on    : 绑定事件监听, 可简写为@                         v-if        : 条件渲染(动态控制节点是否存存在)                         v-else  : 条件渲染(动态控制节点是否存存在)                         v-show  : 条件渲染 (动态控制节点是否展示)                 v-text指令:                         1.作用:向其所在的节点中渲染文本内容。                         2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>v-text指令</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body> 
        <!-- 准备好一个容器-->
        <div id="root">
            <div>你好,{{name}}</div>
            <div v-text="name"></div>
            <div v-text="str"></div>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        
        new Vue({
            el:'#root',
            data:{
                name:'v-text',
                str:'<h3>你好啊!</h3>'
            }
        })
    </script>
</html>

 

  

标签:Vue,渲染,text,指令,动态控制,节点
From: https://www.cnblogs.com/anjingdian/p/17003092.html

相关文章

  • Vue之表单元素
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>收集表单数据</title><scripttype="text/javascript"src="../js/vue.j......
  • Vue之set()方法
     可以在指定的对象里添加新的key值示例:<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>Vue监测数据改变的原理</title>......
  • Docker+Jenkins+Gitee+Node+Vue构建dist包并通过publish over ssh传输到服务器替换重
    场景docker-compose入门以及部署SpringBoot+Vue+Redis+Mysql(前后端分离项目)以若依前后端分离版为例:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/12837......
  • Vue监测数据改变的原理
      <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>更新时的一个问题</title><scripttype="text/javascript"src="........
  • Vue排序
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>列表排序</title><scripttype="text/javascript"src="../js/vue.js"><......
  • Vue之列表过滤
     示例:<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>列表过滤</title><scripttype="text/javascript"src="../js/v......
  • 基于ZR.VUE 前端的改造,页面刷新报错
     问题描述:前后端分离开发,分开部署.页面刷新直接报404错误的解决办法提示: 先在 .env.development中配置 VUE_APP_BASE_API,将'/'替换为后端地址'http......
  • 嵌入式:ARM转移指令(分支指令)
    ARM有2种方法可实现程序的转移:一种是利用传送指令直接向PC寄存器R15中写入转移的目标地址,通过改变PC的值实现程序的转移;另一种就是利用转移指令。ARM的转移指令可以从当前指......
  • 硬核万字长文,深入理解 Java 字节码指令(建议收藏)
    Java字节码指令是JVM体系中非常难啃的一块硬骨头,我估计有些读者会有这样的疑惑,“Java字节码难学吗?我能不能学会啊?”讲良心话,不是我谦虚,一开始学Java字节码和Java......
  • Vuex
    简介​  在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。......