模板 {{}}
当所谓的数据(data)发生改变的时候,输出的内容会默认的重新渲染一遍,如果为了安全起见想数据只渲染一遍不再改动的话前面加个*
就好了
模板1
- 当改成这样的时候点击按钮将不会再次渲染
html部分:
<input type="button" @click="fn" value="点我">
{{*msg}}
js部分:
<script>
new Vue({
el:'body',
data:{
msg:'hello',
},
methods:{
fn:function(){
this.msg='change';
}
}
})
</script>
模板2
- Vue中输出data为html代码应该怎么显示
- 在Vue中 两个花括号
{{}}
相当于原生js的innerText
,三个花括号{{{}}}
相当于原生js的innerHTML
。
html部分:
<style>
div{
width: 100px;
height: 100px;
background: black;
color: white;
}
</style>
<body>
//尝试将这里改为两个看下是否正常显示html标签
{{{msg}}}
</body>
js部分:
<script>
new Vue({
el:'body',
data:{
msg:'<div>这里是一个div</div>',
}
})
</script>
注意:建议还是用两个花括号{{}}
innerText,防止其他人恶意注入
属性 — 常用属性class及style
属性 — src
html部分:
<style>
img{
height: 375px;
width: 500px;
}
</style>
<input type="button" value="change" @click="btn">
//这里的属性如果用原生js的话需要使用vue模板才能接收到vue对象中的data
//src="{{url}}"
<img v-bind:src="url">
js部分:
new Vue({
el:'body',
data:{
//num 是计数器开关,用于控制图片切换
num:0,
url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg",
},
methods:{
btn:function(){
this.num++;
this.num%2==1?this.url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560472659224&di=896584de51fc9b26933157aed6a00ff7&imgtype=0&src=http%3A%2F%2Fimg08.oneniceapp.com%2Fupload%2Favatar%2F2018%2F05%2F05%2Faba7e29327a27abfcb1e525f623934ee.jpg":
this.url="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg";
}
}
})
- 如果使用原生js的话需要使用vue模板
{{}}
如果使用vue方法的话则不需要 -
v-bind:scr="url"
可以缩写前缀vue方法为冒号:src="url"
,这样的写法vue也可以识别
属性 — class
- 使用vue传输
innerText
的原理,传输文本作为类名
html部分:
<style>
div{
width: 100px;
height: 100px;
}
.red{
background: red;
}
</style>
<input type="button" value="click" @click="btn">
<div v-bind:class="myDiv"></div>
<!-- 或者使用原生的 class="{{myDiv}}-->
js部分:
<script>
new Vue({
el:'body',
data:{
myDiv:'red',
}
})
</script>
一般赋予多个类的话在html中是
class="a b c"
,而在vue中则是以数组或json格式,因为json是键值对格式的,相当于数组的下标与索引值的关系。- 什么是键值对格式 —
key:value
(例子:width:200px;) - 数组格式
- 什么是键值对格式 —
html部分:
<style>
div{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.shadow{
box-shadow: 0 0 15px;
}
</style>
<input type="button" value="click" @click="btn">
<div v-bind:class="myDiv"></div>
js部分:
<script>
//最常用的属性‘class’‘style’
new Vue({
el:'body',
data:{
//赋予多个class 属性一般直接'class="a b c"' 在vue中则使用数组形式
//['a','b','c']
myDiv:['red','shadow'],
},
methods:{
//切换class
//方法‘pop()’是去除class的,方法‘push()’是插入class的
//如果只用‘pop’方法的话会一直去除class 样式直到数组为空
btn:function(){
this.myDiv.length==1?this.myDiv.push('shadow'):this.myDiv.pop('shadow');
}
}
})
</script>
- json格式
html部分:
<style>
div{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.shadow{
box-shadow: 0 0 15px;
}
.animate{
transition: 0.5s;
}
</style>
<input type="button" value="click" @click="btn">
<div v-bind:class="myDiv"></div>
js部分:
<script>
new Vue({
el:'body',
data:{
//使用json 格式也可以
myDiv:{
red:true,
shadow:true,
animate:true,
}
},
methods:{
btn:function(){
this.myDiv.shadow=!this.myDiv.shadow;
}
}
})
</script>
Style三种传输格式
style在vue中有三种传输格式
- json
- json数组 – [ json ,json ,json ]
- string
- 其中json与string格式差不多
json格式
- 因为style原生的代码本来就是类似于json格式的,所以能用json格式传输不出奇
html部分:
<input type="button" value="cahnge" @click="btn">
<div v-bind:style="myDiv"></div>
js部分:
<script>
new Vue({
el:'body',
data:{
myDiv:{
width:"200px",
height:"200px",
background:"red",
transition:"0.5s"
}
},
methods:{
btn:function(){
this.myDiv.width="400px";
this.myDiv.height="400px";
this.myDiv.background="green";
}
}
})
</script>
json数组形式
- 就像赋予多个类,每个类不同样式一样,你可以定义多个类赋予给同一个标签,同样的也相当于赋予一个标签多个不同作用域下的样式,用json数组形式赋予检查网页代码可以看到样式都给添加进去了
html部分:
<input type="button" value="cahnge" @click="btn">
//这里给style赋予了两个样式
<div v-bind:style="[myDiv,green]"></div>
js部分:
<script>
new Vue({
el:'body',
data:{
myDiv:{
width:"200px",
height:"200px",
background:"red",
transition:"0.5s"
},
green:{
background:"green",
}
},
methods:{
btn:function(){
this.myDiv.width="400px";
this.myDiv.height="400px";
this.myDiv.background="green";
}
}
})
</script>
string形式
- string形式其实和json格式的写法一样,但是特意拿出来说是因为他们的概念不一样,string形式是利用vue的类似于
innerText
的操作来赋予样式的,而json形式的概念突出他的数据格式
html部分:
<input type="button" value="cahnge" @click="btn">
<div v-bind:style="myDiv"></div>
js部分:
<script>
new Vue({
el:'body',
data:{
myDiv:{
width:"200px",
height:"200px",
background:"red",
transition:"0.5s"
}
},
methods:{
btn:function(){
this.myDiv.width="400px";
this.myDiv.height="400px";
this.myDiv.background="green";
}
}
})
</script>
小案例演示:vue-tab面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab面板</title>
<script src="../vue.js"></script>
<style>
div{
width: 100px;
height: 100px;
background: #ccc;
}
input.active{
background: red;
}
</style>
</head>
<body>
<!-- $index 是当前按钮的下标值-->
<input type="button" v-for="i in value" :value="i" :class="$index==index?'active':''" @click="btn($index)">
<div v-for="i in inner" v-show="$index==index?true:false" >
{{i}}
</div>
<script>
new Vue({
el:'body',
data:{
index:0,
value:['leo','sky','li'],
inner:['今年18岁了','今年31岁了','今年22岁了']
},
methods:{
btn:function(myIndex){
this.index=myIndex;
}
}
})
</script>
</body>
</html>