1.vue输出文本:通过{{...}}进行数据绑定改变data中的值从而进行改变
代码如下:
<body>
<div id="app">
<!--输出文本-->
<h1>{{url}}</h1>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
url: 'www.baidu.com'
}
})
</script>
结果如下:
可以见到我们通过修改data中的数据,网页中的数据也发生变化:
2.vue输出html代码:v-html
代码如下:
<body>
<div id="app">
<!--使用v-html指令输出html代码-->
<div v-html="msg"></div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg: '<h3>hello</h3>'
}
})
</script>
结果如下:
3.vue绑定属性:v-bind,v-bind可以简写为‘:’
代码如下:
<style>
.class1{color:red;}
</style>
<body>
<div id="app">
<!--使用v-bind绑定属性-->
<div v-bind:class="{'class1':class1}">world</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
class1: true
}
</script>
结果如下:
可以见到我们把class1改为false,字体颜色也会发生改变:
4.vue的v-if和v-show:v-if是控制节点的渲染和显示,v-show只是样式display的切换:
代码如下:
<body>
<div id="app">
<!--v-if-->
<div v-if="flag1">see you</div>
<!--v-show-->
<div v-show="flag2">see you again</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag1: false,
flag2: false
}
})
</script>
结果如下,可以见到v-if代码段在html中是没有的,而v-show代码段只是将display变为none:
通过将flag1变为true可以见到html中渲染了v-if代码块,而v-show只是将display移除: