|
[Vue.js]学习笔记-Vue.js模板语法-属性
导读部分
教程部分
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
Vue.js的模板语法有如下几种（点击进入各个详情介绍哦）： 2. 属性
今天我们主要学习下Vue.js中的模板语法-属性
HTML 属性中的值应使用 v-bind 指令。 大街可以通过下面的实例进行v-bing指令的了解。 实例：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛</title>
</head>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
<br><br>
<div v-bind:class="{'class1': class1}">
v-bind:通过指令修改背景颜色
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>
</body>
</html>
此图为页面html运行后的显示效果， 此处可看到， 下面的div内容是没有添加背景色的
通过上图可以清晰的看到， 当我们在修改颜色后的复选框进行选中时间操作是， 原本有内容的div，就被加上了背景色
再次取消复选框的选中事件， 背景色就会被取消， 想看图1
我们查看html内容， 很容易就会发现， 在div上， 我们使用的属性绑定事件， v-bind， 在此处我们进行了class的绑定， 既如下代码： [HTML] 纯文本查看 复制代码 <div v-bind:class="{'class1': class1}">[/align][/align] v-bind:通过指令修改背景颜色
</div> 此为给class属性绑定了事件
在下面的js中， [JavaScript] 纯文本查看 复制代码 <script>
new Vue({
el: '#app',
data:{
class1: false
}
});
</script>我们可以看到， 初始加载的时候， 我们给class1， 赋值为false 既不加载class的样式， 故： 在页面运行的时候， class的背景色并没有被加载上
其他的属性值绑定与本帖的事例方式一样， 稍后我们更新其它的属性绑定方式实例， 欢迎大家进行查看阅读哦。
一起努力，加油，学习Vue.js， 加油 
| 
窥视卡
雷达卡
发表于 2018-11-29 22:05:57
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2018-11-30 08:53:40
