摘要:完整代码链接模板当所谓的数据发生改变的时候,输出的内容会默认的重新渲染一遍,如果为了安全起见想数据只渲染一遍不再改动的话前面加个就好了模板当改成这样的时候点击按钮将不会再次渲染部分点我部分模板中输出为代码应该怎么显示在中两个花括号相当于原生
完整代码链接
模板 {{}}当所谓的数据(data)发生改变的时候,输出的内容会默认的重新渲染一遍,如果为了安全起见想数据只渲染一遍不再改动的话前面加个*就好了
当改成这样的时候点击按钮将不会再次渲染
html部分: {{*msg}} js部分:
Vue中输出data为html代码应该怎么显示
在Vue中 两个花括号{{}}相当于原生js的innerText,三个花括号{{{}}}相当于原生js的innerHTML。
html部分: //尝试将这里改为两个看下是否正常显示html标签 {{{msg}}} js部分:
注意:建议还是用两个花括号{{}}innerText,防止其他人恶意注入
属性 -- 常用属性class及stylehtml部分: //这里的属性如果用原生js的话需要使用vue模板才能接收到vue对象中的data //src="{{url}}" js部分: new Vue({ el:"body", data:{ //num 是计数器开关,用于控制图片切换 num:0, url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg", }, methods:{ btn:function(){ this.num++; this.num%2==1?this.url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560472659224&di=896584de51fc9b26933157aed6a00ff7&imgtype=0&src=http%3A%2F%2Fimg08.oneniceapp.com%2Fupload%2Favatar%2F2018%2F05%2F05%2Faba7e29327a27abfcb1e525f623934ee.jpg": this.url="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg"; } } })
如果使用原生js的话需要使用vue模板{{}}如果使用vue方法的话则不需要
v-bind:scr="url"可以缩写前缀vue方法为冒号:src="url",这样的写法vue也可以识别
使用vue传输innerText的原理,传输文本作为类名
html部分: js部分:
一般赋予多个类的话在html中是class="a b c",而在vue中则是以数组或json格式,因为json是键值对格式的,相当于数组的下标与索引值的关系。
什么是键值对格式 -- key:value(例子:width:200px;)
数组格式
html部分: js部分:
json格式
html部分: js部分:Style三种传输格式
style在vue中有三种传输格式
json
json数组 - [ json ,json ,json ]
string
其中json与string格式差不多
因为style原生的代码本来就是类似于json格式的,所以能用json格式传输不出奇
html部分: js部分:
就像赋予多个类,每个类不同样式一样,你可以定义多个类赋予给同一个标签,同样的也相当于赋予一个标签多个不同作用域下的样式,用json数组形式赋予检查网页代码可以看到样式都给添加进去了
html部分: //这里给style赋予了两个样式 js部分:
string形式其实和json格式的写法一样,但是特意拿出来说是因为他们的概念不一样,string形式是利用vue的类似于innerText的操作来赋予样式的,而json形式的概念突出他的数据格式
html部分: js部分:小案例演示:vue-tab面板
tab面板 {{i}}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104701.html
摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。 一、vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...
摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。 一、vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...
摘要:供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下,我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。 一、vue生命周期 vue实例从创建到销毁的过程,称为生命周期,共有八个阶段。 这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...
阅读 3635·2021-09-07 09:59
阅读 694·2019-08-29 15:12
阅读 769·2019-08-29 11:14
阅读 1277·2019-08-26 13:27
阅读 2617·2019-08-26 10:38
阅读 3092·2019-08-23 18:07
阅读 1247·2019-08-23 14:40
阅读 1874·2019-08-23 12:38