Vue学习笔记11- v-bind的玩法

前言：
平时我们按钮的value是我们在标签内把它给写死的，还有样式我们可否决定何时生效何时失效？我们有没有什么办法可以把它给盘活呢？当然是有滴，Vue内置了v-bind来灵活为value赋值和显示样式。

1.首先我们创建一个vue实例：

• 我们等下就把data数据模型里面的random和button按钮的value关联起来。

 const app = new Vue({
        el: "#app",    //根据名称操作div,作用域只在该div
        data: {
            random: 0,
        },
        methods:{
        },
    });

2.html模板代码：

• 我们只需要在value前面加上v-bind
• value的内容为data数据模型里的数值即可
• 添加一个点击事件，点击为random赋值随机数

 <div id="app">
        <input type="button" v-bind:value="random" @click="random=Math.random()">
    </div>

3.运行代码：

• 随着我们的点击，按钮里的value的值会不断变化。
  
  4.使用v-bind决定样式是否显示：
• 创建vue实例，添加数据store，初始值为0：

 //创建Vue实例
    const app = new Vue({
        el: "#app",    //根据名称操作div,作用域只在该div
        data: {
            store: 0
        },
        methods:{
        },
    });

• html模板代码：

//添加修改模型数据的文本框
<input type="text" v-model="store"><br>
//添加按钮，在class前面加上v-bind，class内容为键值对，key是样式名称，value是布尔类型。当value为true时显示样式，false不显示。
<input type="button" v-bind:class="{active:store>0}" value="测试">

• class样式代码：

<style>
	.active{
		background-color: red;    //背景为红色
	}
</style>

• 运行代码：
  
• 我们可以看到上面的样式并没有被渲染，当我们改变stroe的值让它为true:
  
• 样式被成功渲染。
• 如果有静态样式怎么办？当然时可以写在后面的，v-bind:class可以和class共存，当v-bind:class里的value为true时，它会把样式追加到class里面。
• v-bind:class可以简写为 :class。