<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.page{
background-color: palegoldenrod;
}
.title{
color: palevioletred;
}
</style>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div id="box">
<!--使用两个大括号嵌套，放入vue对象的属性名-->
<p>{{content}}</p>
<!--通过属性v-html指令-->
<p v-html="html_con"></p>
<!--通过属性v-text指令-->
<p v-text="html_con"></p>
<!--以上形式数据如果发生变化，会重新渲染-->
<!--使用v-once，只能渲染一次，数据不能再发生变化-->
<p v-once>{{single}}</p>
<!--v-show 设置display的样式，控制元素显示与否-->
<p v-show="isshow">{{single}}</p>
<!--v-bind -->
<img v-bind:src="img_pic" />
<!--可以简写为-->
<img :src="img_pic" />
<!--添加类-->
<p :class="classname">hello vue</p>
<!--添加多个类-->
<p :class="[classname, classname1]">hello html</p>
<!--通过true或false控制是否添加该类-->
<p :class="{page:page_cls, title:title_cls}">hello css</p>
</div>
</body>
<script>
var data_obj={
content:"123456",
html_con:"<b>asdkalsda</b>",
single:"unchange",
isshow:false,
img_pic:"../img/pic15.jpg",
classname:"page",
classname1:"title",
page_cls:true,
title_cls:true
}
var vue = new Vue({
el:"#box",
data:data_obj
})
</script>
</html>
kalath_aiur
发布了37 篇原创文章 · 获赞 0 · 访问量 256
私信
关注