Vue review
-
参考网址
https://www.cnblogs.com/songhaixing/p/14706979.html -
三种获取data里面的值的方法
......
<body>
<div id="container">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#container',
data:{
msg:'测试信息'
}
})
</script>
</body>
......
- vm.$data.msg='年后'
- vm._data.msg='年后'
- vm.msg='年后'
-
文本指令
-
v-html: 渲染html标签(默认是不会渲染html标签的)
-
v-text: 原生展示js变量的内容,不会进行html解析
-
v-show: 放入布尔值;真,显示标签;假,不显示标签
-
v-if: 放入布尔值;真,显示标签;假,不显示标签
-
-
v-show 与 v-if 的区别
- v-show(比较懒) : 当值为 false 时, 标签还存在, 只是不显示, 因为设置了 display:none 属性
- v-if : 直接进行的 DOM 操作, 对标签进行删除或插入
- v-html示例
......
<body>
<div id="container">
<!--可以简写成: <h3 v-html="link"></h3> 即无需再写插值语法-->
<h3 v-html="link">{{link}}</h3> <!--成功渲染-->
<h3>{{link}}</h3> <!--不会被渲染-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#container',
data:{
link:'<a href="http://www.baidu.com">摆渡一下</a>'
}
})
</script>
</body>
- v-text演示
......
<div id="container">
<h3 v-html="link">{{link}}</h3> <!--会解析html-->
<h3 v-text="link"></h3> <!--不会解析html-->
<h3 v-text="content"></h3> <!--显示content文本-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#container',
data:{
link:'<a href="http://www.baidu.com">摆渡一下</a>',
content:"人面不知何处去,桃花依旧笑春风"
}
})
</script>
- v-show演示
......
<body>
<div id="container">
<button type="button" @click="showMsg">{{btnContent}}</button>
<h3 v-show="isShow">{{msg}}</h3> <!--关注之处-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#container',
data:{
isShow:true, // 设置默认值
msg:"人面不知何处去,桃花依旧笑春风",
btnContent:'隐藏'
},
methods:{
showMsg(){
this.msg = !this.msg
if(!this.msg){
this.btnContent = '显示'
this.msg = ''
}else{
this.btnContent = '隐藏'
this.msg = "人面不知何处去,桃花依旧笑春风"
}
}
}
})
</script>
</body>
......
- 把上述demo小改一下,变成如下方式,一模一样的效果
只不过Dom结构有所不一样
<h3 v-if="isShow">{{msg}}</h3>