标签：属性 -- 定义 boolean 样式 对象 rip 加载 baidu
v-once让值不再发生改变，可通过在console控制台输入app._data.message=....修改message属性的值，结果是被v-once 标识的标签的值没有改变
<<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data:{
message: ‘你好‘
}
})
</script>
<body>
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
<h2>{{message}}</h2>
<!--效果跟上面一样，但是不灵活，无法进行扩展-->
<h2 v-text="message"></h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data:{
message: ‘你好‘,
url: ‘<a href="http://www.baidu.com">百度一下</a>‘
}
})
</script>
</body>
通过v-bind可以将对属性进行绑定，绑定之后的属性的变化会进行实时同步，而不需要重新加载页面
<body>
<div id="app">
<!--错误的写法：这里不可以使用mustache语法-->
<!--<img src="{{imgURL}}" >-->
<!--正确的做法：使用v-bind指令-->
<img v-bind:src="imgURl" >
<a v-bind:href="baidu">百度一下</a>
<!--<h2>{{}}</h2>-->
<!--语法糖的写法-->
<img :src="imgURl" >
<a :href="baidu">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data:{
imgURl: ‘http://static.zongheng.com/upload/cover/4e/aa/4eaa114ca437b05a1b0daedea461c814.jpeg‘,
baidu: ‘http://www.baidu.com‘
}
})
</script>
</body>
v-bind也可以动态绑定class，首先定义一个样式，一个boolean类型的isActive属性，一个按钮并且添加一个事件来改变isActive的值，通过这个isActive来控制class 是否生效，下面的两种方式分别是v-bind:class绑定对象和方法，而getClass方法返回的也是一个对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: #ffdbac;
}
</style>
</head>
<body>
<div id="app">
<h2 class="active">{{message}}</h2>
<h2 :class="active">{{message}}</h2>
<!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>-->
<!--<h2 v-bind:class="{类名1: boolean, 类名2: boolean}">{{message}}</h2>-->
<h2 v-bind:class="{active: isActive}">{{message}}</h2>
<h2 v-bind:class="getClass()">{{message}}</h2>
<!--<h2 v-bind:class="active">{{message}}</h2>-->
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data:{
message: ‘hello‘,
active: ‘active‘,
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
},
getClass: function () {
return {active: this.isActive}
}
}
})
</script>
</body>
</html>
v-bind也可以绑定style，用法与绑定class类似，具体如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!--‘10px‘必须加上单引号，否则是当做一个变量去解析-->
<!--<h2 :style="{fontSize: ‘10px‘}">{{message}}</h2>-->
<!--finalSize当成一个变量使用-->
<h2 :style="{fontSize: finalSize}">{{message}}</h2>
<h2 :style="{fontSize: fSize + ‘px‘, backgroundColor: fColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data:{
message: ‘hello‘,
finalSize: ‘100px‘,
fSize: 100,
fColor: ‘blue‘
}
})
</script>
</body>
</html>
标签：属性 -- 定义 boolean 样式 对象 rip 加载 baidu
原文地址：https://www.cnblogs.com/lamsa/p/14322038.html
