v-html和

最新推荐文章于 2022-11-19 22:58:32 发布
最新推荐文章于 2022-11-19 22:58:32 发布
阅读量99 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115311704
版权

基本指令

1.非表单元素(div p span)

优点缺点作用
{{}}书写方便,简单,快捷不能解析data数据中的标签,会出现闪屏问题做插值表达式
v-html可以解析data数据中的标签–做富文本渲染
v-text不会出现闪屏问题不能解析data数据中的标签做标签内容展示
解决闪屏问题: v-cloak
通过v-cloak指令将制定元素设置样式display:none,当vue文件加载成功之后,再将带有v-cloak元素的样式设置为:display:block,
  <style>
        [v-cloak]{
            display:none;
        }
    </style>
 <!-- 2.作用域 -->
    <div id="app" v-cloak>
        <h2>name的值为:{{name}}</h2>
        <div>{{'拥有一辆:'+car}}</div>
        <div>价格在:{{price.toFixed(2)}}万</div>
        <div>{{score>=60 ? score: 60}}</div>
        <p>{{1+1}}</p>
        <div>{{str}}</div>
    </div>
  • {{}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app" v-cloak>
        <h2>name的值为:{{name}}</h2>
        <div>{{'拥有一辆:'+car}}</div>
        <div>价格在:{{price.toFixed(2)}}万</div>
        <div>{{score>=60 ? score: 60}}</div>
        <p>{{1+1}}</p>
        <div>{{str}}</div>
    </div>
    <script>
        // 3.产生vue实例
        /**
         * 1.data中的数据要渲染在页面中,通过{{}}进行渲染.
         * 2.{{}}可做解析变量使用.也可以写一些简单的表达式运算
        */
        new Vue({
            el:'#app',//挂载点
            data:{
                name:'赵丽颖',
                car:'宝马X6',
                price:60.00,
                score:65,
                str:'<mark>坐在宝马车里烫火锅</mark>'
            }
        })

    </script>
</body>
</html>
  • v-html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
       <h2 v-html="name">哈哈</h2>
       <div v-html="str"></div>
    </div>
    <script>
        // 3.产生vue实例
        /**
         * 1.v-html指令:做数据解析,标签中的文本内容不会被浏览器解析,只解析v-html中的数据
         * 2.v-html:一般放在标签的属性中,值为data中的属性名.
        */
        new Vue({
            el:'#app',//挂载点
            data:{
                name:'赵丽颖',
                car:'宝马X6',
                price:60.00,
                score:65,
                str:'<mark>坐在宝马车里烫火锅</mark>'
            }
        })
    </script>
</body>
</html>
  • v-text
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入vue.js -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
    <!-- 2.作用域 -->
    <div id="app">
       <h2 v-text="name">哈哈</h2>
       <div v-text="str"></div>
    </div>
    <script>
        // 3.产生vue实例
        /**
         * 1.v-html指令:做数据解析,标签中的文本内容不会被浏览器解析,只解析v-html中的数据
         * 2.v-html:一般放在标签的属性中,值为data中的属性名.
        */
        new Vue({
            el:'#app',//挂载点
            data:{
                name:'赵丽颖',
                car:'宝马X6',
                price:60.00,
                score:65,
                str:'<mark>坐在宝马车里烫火锅</mark>'
            }
        })
    </script>
</body>
</html>
该睡觉觉了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html求和
m0_58826255的博客
06-07 2372
1.类型转换： 　　分为自动转换和强制转换，一般用强制转换。 　　其他类型转换为整数：parseInt（）； 　　其他类型转换为小数：parseFloat（）； 　　判断是否是一个合法的数字类型：isNaN（）； 　　是数字的话返回false，不是数字的话返回ture。 示例： 需要将prompt放进isNaN方法内 2.运算符： 　　数学运算符：+ - * / % ++ --； 　　关系运算符：== ！= >= ...
单目运算符 双目运算符 三目运算符
lzs472449987的专栏
08-21 2万+
单目就是这个运算符只对一个变量进行操作   代表符号：!(逻辑非) ~（按位取反）++（自增）--（自减）   举例：int a=1;a++;（第二句“a++”则只对a一个变量进行了操作）   2。双目就是这个运算符对两个变量进行操作   举例：int a=1,b
js 中的单目运算符，双目运算符与三目运算符区别
KLW75
02-09 1957
单目运算符 ：运算符只对一个变量进行操作。 双目运算符 ：对两个变量进行操作。 三目运算符：运算符对三个变量进行操作。 这里记录一下。
一文带你学会Vue3基本语法
大河之犬的博客
11-19 2605
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。指令将该元素的 href 属性与表达式 url 的值绑定。
vue的表达式和指令
xy631739211的博客
05-27 1487
Vue：渐进式JavaScript框架 上次的demo如下： el:挂载到指定名称的html标签上 data:绑定的数据 -->相当于给html中使用的时候所传的值 methods：绑定的方法 [注意：其中this代表Vue对象] methods:{ 方法名:function(){ //代码… } } 效果图： Vue指令： v-text=“表达式” 设置标签中的文本 v-html 设置标签中的html v-if
Vue学习第一天
Pecodo的博客
01-12 276
首先在html中导入Vue的js文件 可以下载vue.min.js或者使用cdn方法https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js 第二步: Hello Vue 效果: vue将dom与数据建立连接 并且是响应式的: 在控制台输入app.message = 'helloword'  Enter 还有另一种方...
vuejs学习笔记 v-model v-on v-bind computed vue三目运算符
qq_25009679的博客
01-24 1万+
html> html lang="en"> head> meta charset="UTF-8"> link rel="stylesheet" href="./css/bootstrap.min.css"> title>Titletitle> head> style> .complete{ color: #00a65a; text-d
v-html和v-text的区别.rtf
最新发布
02-06
v-text和v-html 是 Vue.js中两种不同的指令，它们的主要区别在于如何处理模板中的文本内容： v-text： 主要用途是将数据中的文本直接插入到模板中。 当数据中的文本或HTML标签被插入时，它会被原样输出，不需要...
vue 插值 v-once,v-text, v-html详解
08-28
插值可以分为三种类型：v-once、v-text 和 v-html，每种类型都有其特点和应用场景。 插值 插值是 Vue.js 中最基本的数据绑定方式。它可以将数据模型的值绑定到 HTML 元素中，使得数据的变化可以实时地反映到视图中...
v-html指令.html
11-28
v-html指令.html
vue实现在v-html的html字符串中绑定事件
10-16
今天小编就为大家分享一篇vue实现在v-html的html字符串中绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue指令v-html使用过滤器filters功能实例
10-16
在本篇文章里我们给大家整理的是关于vue指令v-html使用过滤器filters功能的实例内容，需要的朋友们学习下。
vue花括号里使用三元运算符(多条判断)
lyyo_cd的博客
04-09 3万+
vue 三目运算
abc541817535的博客
05-04 5971
:class="followed ? 'btn-success':'btn-secondary'" 转载于:https://www.cnblogs.com/qiu2841/p/8990917.html
如何单目运算符和双目运算符以及三目运算符
热门推荐
Allen_by的博客
09-09 3万+
1、单目运算符：　 单目运算符是指运算所需变量为一个的运算符，又叫一元运算符，其中有逻辑非运算符：!、按位取反运算符：~、自增自减运算符：++， –等。 逻辑非运算符【!】、按位取反运算符【~】、自增自减运算符【++， –】、负号运算符【-】、类型转换运算符【(类型)】、指针运算符和取地址运算符【*和&】、长度运算符【sizeof】 2、双目运算符： 双目运算符就是对两个变量进行操作
vue中的三元运算符
weixin_34127717的博客
05-31 1万+
我们要做的效果如下： 如上图的全部分类效果，符号'、'的样式具体写法如下图：数据如下： 补充：我们一开始想的可能是在数据中直接加符号'、'，但是脑子想让我换个想法，所以想先控制显示，第一种直接用v-show来控制，或者v-if，或者绑定class等来进行显示，另一种则是内容的选择显示，选择显示为空或者'、' ...
vue- style行内样式
zhangyiyang111的博客
03-30 7218
style行内样式 :style=“变量” :style="{color:‘red’,width:‘100px’}" :style="[可做三元运算判断]" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
vue优缺点
zhangyiyang111的博客
03-29 2103
vue简介 官网:https://cn.vuejs.org/ 目的:简单.快速开发 1.vue优缺点 优点 易用 已经会了 HTML、CSS、JavaScript？ 灵活 1.拥有不断繁荣的生态系统(vue route, vuex,vue服务端渲染) 2.可以使用一个库或者一个框架进行开发 高效 1.运行大小20kB, 超快虚拟 DOM 浏览器解析页面步骤 : 1.解析HTML,生成HTML树, 2.解析css,生成样式树, 3
input限制两位小数（包含iOS）
zhangyiyang111的博客
11-29 1577
<input type="number" inputmode="decimal" class="common-form-text common-form-color" placeholder="请输入房屋面积" v-model="fwmj" @input="fwmj=fwmj.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').repl
v-html和v-text
07-28
v-html和v-text是Vue.js中的两个指令，用于在页面中渲染数据。 v-html指令用于将data中的数据渲染到指定标签，并且可以解析其中的HTML标签。它类似于HTML中的innerHTML。使用v-html指令时，标签的原始内容会被清空...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值