<!DOCTYPE html>
<html>
<body>
<style>
[v-cloak]{
display:none;
}
</style>
<div id="app" v-cloak>
<!-- {{message}} 这种插值表达式动态绑定的是内容,可以是字符串也可以是表达式,会和data同步变 -->
<h2 style="text-decoration:underline">{{message}}</h2>
<h2 v-once>{{message}}</h2>
<!-- v-once:message只更新一次后面message再改变但是此处展示内容不会变了 -->
<h2 v-html="url"></h2>
<!-- v-html:以html的形式显示内容 -->
<h2 v-text="message">你好哇</h2>
<!-- 会覆盖后面标签要显示的文字 -->
<h2 v-pre>{{message}}</h2>
<!-- v-pre:不会解析直接显示标签之前内容 -->
<img v-bind:src="imageurl" >
<!-- {{message}} 不可以绑定标签里的属性,如果要动态改变标签的属性,比如照片的轮播图的src属性,需要通过v-bind指令 -->
<!-- v-bind:src可以缩写为:src -->
<!-- v-bind可以动态绑定class和style ,可以是普通表达式、对象、数组-->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:finnalsize}">{{message}}</h2>
<h2 :style="[basestyle,overridingStyle]">{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue(
{el:"#app",
data:{
message:"勇敢牛牛不怕困难",
url:'<a href="http://www.baidu.com">百度一下你就知道</a>',
imageurl:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=图片&hs=0&pn=9&spn=0&di=68750&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=103721101%2C4076571305&os=1671681722%2C547245709&simid=3334649763%2C301832115&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=图片&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4034970a304e251fae75ad03a786c9177e3e534e.jpg%26refer%3Dhttp%3A%2F%2Fgss0.baidu.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1630300825%26t%3D2b8dc5ea6ab838ab453687c56d2a6981&fromurl=ippr_z2C%24qAzdH3FAzdH3Fr5oj6_z%26e3Bkwt17_z%26e3Bv54AzdH3Fq7jfpt5gAzdH3F9lcmlbcln_z%26e3Bip4s%3Fqks%3D6jswpj_q7jfpt5g_c&gsm=3&islist=&querylist=',
finnalsize:'100px',
basestyle:{backgroundColor:'red'},
overridingStyle:{frontSize:'150px'}
},
methods:{
}
})
</script>
</body>
</html>
(1)vue插值命令的简单用法
最新推荐文章于 2023-07-05 11:15:36 发布