vue.js 学习语法篇一_沙丁鱼 js-CSDN博客

本文链接：https://blog.csdn.net/asdfghj253/article/details/100117481

1.v-html语法：

该语法主要作用是输出html语句

例如：

<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1 style="color:red">html语句</h1>'
  }
})
</script>

2.v-model语法

v-model作用是双向绑定，就是指一方改变；另一方也会跟着改变

<div id="app">
    <input v-model="message"></input>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '你好呀'
  }
})

例如此代码，如果input的值从‘’你好呀‘’变为‘’你好‘’，那么message也会跟着变成‘你好’。

3. v-bind语法

v-bind在我理解中就是使用vue的一些数据参数

<div id="app">
          学习：勾选<input type="checkbox" v-bind:checked="message"></input>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: true
  }
})

如果单纯在html中写message，那么H5中会把其作为单纯的字符串，但如果使用v-bind,则相当于使用了vue里面的数据参数；这个语法应用比较广泛，可以用缩写（或者完整）的语法调用vue的函数或对象。（缩写->前面加个冒号-》 :check=“message” )

4.v-if,v-else-if,v-else语法

这几个和普通的if,else-if,else一样的性质，具体没什么好说的，主要是在H5里面的写法吧

<div id="app">
    <span v-if="message ==1">
      1
    </span>
    <span v-else-if="message ==2">
      2
    </span>
    <div v-else>
              另外的数字
    </div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 3
  },

})