vue从后台获取的数据有html标签通过v-html渲染到页面给html添加样式的方法如下:
准备材料:Vue.js、HBuilder、浏览器
1、创仔凯建静态页面vhtml.html,并引入vue.js文件。
2、在<body></body>元素内插入两个div,一手乱个作为外层div,另外一个作为子div,并在父div绑定v-html指令。
3、绑定v-html指令数据,这里设置为字符串。
4、Vue.js库的v-html指令是插入html元素,修改datas为包含<p></p>标签。
5、预览该静态页面,这时会看到页面显示如下
6、将调试打开念薯唤,这时发现<div></div>中有个<p></p>标签,完成添加。
利用Vue.js库中的v-bind绑定样式属性:第一步,握桥创建静态页面vbind.html,并引入vue.js文件
第二步,在主体里插入一个div标签元素,并在div中插入img元渗姿素,利用v-bind绑定img的src属性
第三步,利用Vue.js代码绑定src属性,默认为项目中的段喊猛图片
第四步,由于图片比较小,添加一个间隔,padding属性
第五步,预览该静态页面,这时在页面上显示一个小图片
第六步,打开浏览器下方调试工具,可以看到div中的img的src属性值
一、Vue css过渡的基本语法<div v-if="show" :transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS
/* 必需 */扒雹
.expand-transition {
transition: all .3s ease
height: 30px
padding: 10px
background-color: #eee
overflow: hidden
}
/* .expand-enter 定春大帆义仿森进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0
padding: 0 10px
opacity: 0
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)