html特效指令,vue2——指令v-text v-html v-bind
一 : 指令的概念:
指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能
二 : 指令的语法:
v-指令名 = “表达式判断或者是业务模型中属性名或者事件名”
三 : 具体指令
1. v-text
作用 : 操作元素中的纯文本
快捷方式 : {{}}
栗子1
简写形式:将v-text=””换成{{}}
{{ message }}
var app = new Vue({
el : '#app',
data : {
message : 'hello world'
}
})
结果:hello world
栗子2
var app1 = new Vue({
el : "#app1",
data : {
year : new Date().getFullYear(),
month : new Date().getMonth()+1
}
})
结果:今天是2017年5月
等同于:
今天是{{year}}年{{month}}月
这里v-text=””,双引号并不是代表字符串,而是vue自定义的划定界限的符号。如果我们里边输出字符串,就要在里边再添加一对单引号。而且经测验,要想输出字符串,必须添加单引号,否则会报错
这里month默认是从0开始的,所以我们要+1
这里{{}}代表的就是””,所以在v-text=””中,我们在内容里边就不需要再写{{}}了,直接写data值就行
栗子3
{{ message }}
{{ message.concat('!!!') }}
{{ message? 'has message' : 'no message' }}
下面这两个语句报错
{{ var message = 'message' }}
{{ if(message){return info} }}
var app = new Vue({
el : '#app', // 绑定了上边的id='app'的元素
data : {
message : 'hello'
}
})
结果:
hello
hello!!!
has message
第四五句报错
大胡子{{}}里边支持表达式
但不是所有的表达式都能放在里边,只有单个语句的可以,像var和if就不可以
如果想使用if语句的话,用三元运算符代替
栗子4
可以采用对象的形式传递多个数据
姓名 : {{ person.name }}
性别 : {{ person.sex }}
年龄 : {{ person.age }}
var app2 = new Vue({
el : "#app2",
data : {
person : {
name : '小明',
sex : '男',
age : 8
}
}
})
结果:
姓名 : 小明
性别 : 男
年龄 : 8
补充一点:
用{{}}的弊端:当网速很慢或者下面的JavaScript写错时,会直接将{{message}}渲染到页面
而使用v-text=”message” 如果出错是不显示的
所以在实际开发中用v-text比较多
2. v-html
作用 : 操作元素中的HTML标签
v-text会将元素当成纯文本输出,v-html会将元素当成HTML标签解析后输出
栗子1
{{ message }}
var app3 = new Vue({
el : "#app3",
data : {
message : "[图片上传失败...(image-b28bd8-1533127932697)]"
}
})
结果:输出代表图片名称的字符串,而不是将图片输出
由此可见:{{}}/v-text不能解析html元素,只会照样输出
栗子2
var app3 = new Vue({
el : "#app3",
data : {
message : "[图片上传失败...(image-6734f-1533127932697)]"
}
})
结果 : 成功显示图片
3.gif
注意 : 你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。
3. v-bind
作用 : 绑定标签属性,:后面是标签属性名
栗子1
[图片上传失败...(image-27c495-1533127932697)]
var app = new Vue({
el : "#app",
data : {
hrefvalue : 'http://www.baidu.com',
source : 'img/1.jpg'
}
})
5.gif
栗子2
鼠标悬停几秒钟查看此处动态绑定的提示信息!
var app2 = new Vue({
el : '#app2',
data : {
message : '页面加载于' + new Date()
}
})
补充v-bind小例子
isOk = {{isOk}}
var app = new Vue({
el : "#app",
data : {
imgSrc : "./img/dele.jpg",
webUrl : "www.baidu.com",
className : "a",
isOk : true,
classA : 'a',
classB : 'b',
red : 'red',
font : '30px',
styleObject : { // 将style写成对象写法
color : 'orange',
fontSize : '40px'
}
}
})
html特效指令,vue2——指令v-text v-html v-bind相关推荐
- CMP指令(cmp指令的功能)
目前有哪些类型的CMP? 目前有共享一级Cache的CMP.共享二级Cache的CMP以及共享主存的CMP PLC里的cmp比较指令是不是停电保持? OQ0.0 /或 Q0.0常开触点 这个是Q0.0 ...
- Vue常用特性——表单操作、表单域修饰符(number:转化为数值 ;trim:去掉开始和结尾的空格 ; lazy : 将input事件切换为change事件)||自定义指令|| 局部指令
Vue常用特性 常用特性概览 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- 指令—— 数据绑定指令||数据响应式||双向数据绑定指令
指令 v-cloak指令的用法 1.提供样式 [v-cloak]{ display: none; } 2.在插值表达式所在的标签中添加v-cloak指令 背后的原理:先通过样式隐藏内容 ...
- vue笔记(二)Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网 一 .class.style操作 二.事件 三.计算属性 四.数据监听.观测 五.指令+自定义指令 六.过滤器 一 .class.style操作 官网 1. class使用: (1)v-b ...
- Vue 常用指令 自定义指令
v-bind, v-model v-bind 为单向绑定: 数据只能从data流向页面 v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data, 一般应用在表单类元素上,(如 ...
- JSP指令--Page指令
page指令 page指令称为页面指令,用来定义JSP页面的全局属性,该配置会作用域整个页面. page指令的属性可以定义MIME类型.定义需要导入的包.错误页的指定等. page指令的语法格式如下: ...
- cmd指令大全指令_Linux 超全实用指令大全 | CSDN 博文精选
作者 | 沉晓 责编 | 屠敏 出品 | CSDN 博客 运行级别和找回root密码指定运行级别运行级别说明:0:关机1:单用户[找回丢失密码]2:多用户状态没有网络服务3:多用户状态有网络服务4:系 ...
- cmd指令大全指令_干货 | Linux 超全实用指令大全
运行级别和找回root密码 指定运行级别 运行级别说明: 0:关机 1:单用户[找回丢失密码] 2:多用户状态没有网络服务 3:多用户状态有网络服务 4:系统未使用保留给用户 5:图形界面 6:系统重 ...
- Linux sse 地址对齐指令,SSE指令:哪些CPU可以执行原子16B内存操作?
在<英特尔®64和IA-32架构开发人员手册>中.3A如今包含您提到的内存订购白皮书的规格,在第8.2.3.1节中说,正如您自己指出的那样, Intel-64内存排序模型可确保以下各项 内 ...
最新文章
- android源码framework下添加新资源的方法
- iOS开发多线程篇—自定义NSOperation
- OpenCV官方文档 理解k - means聚类
- 究竟什么样的简历才能拿到面试?
- QQ音乐vkey获取,更新播放url
- Apache服务器上部署的网站乱码问题的解决办法
- 多少行数_经验丰富的程序员和其每日代码行数
- vim与外部文件的粘帖复制
- sql 键查找 索引查找_残留谓词对SQL Server索引查找操作的影响
- 常用的织梦(dedecms)调用标签
- atitit。企业的价值观 员工第一 vs 客户第一.docx
- java篇-数据库MySQL
- 【板绘必读】完全0基础如何学板绘?
- vivoy55可以升级到android9,Vivo Y55刷机教程_Vivo Y55升级更新官方系统包
- 计算机储位分配,仓库储位分配的基本思路与原则
- rank函数python_Python pandas.DataFrame.rank函数方法的使用
- 华为od统一考试B卷【最少面试官数】C++ 实现
- 生命周期模型_建立从思想到价值的生命周期模型
- Image Processing and Computer Vision_Review:Local Invariant Feature Detectors: A Survey——2007.11...
- Linux中使用mvn命令(使用Maven:-bash:mvn:command not fonud)随笔
热门文章
- git 未能顺利结束(退出码1)
- fastadmin 批量上传不成功_shopee批量上传产品步骤
- 自动生成网络拓扑图开源_为视频自动生成字幕,一款神奇的开源工具!
- java 防并发_并发:如何防止两个不同类中的两个方法同时运行?
- java虚拟机 函数表_java虚拟机的基本结构如图
- iOS coredata 多表查询
- java达达租车接口_Java第一个项目——达达租车系统v1
- React全栈之Instagram开源视频教程
- Nginx代理webSocket经常中断的解决方案, 如何保持长连接
- Effective C++ ------- virtual