【VUE速成】2.模板语法

有下面这一段代码

<script type="text/javascript">
    new Vue({
      el: '#main',
      data: {
        msg: '大家好,我是渣渣辉',
        msg2: '大家好,我是古天落',
        num:123,
        html:'<p>我是一个HTML文本</p>',
        url:'https://www.baidu.com'
      }
    })
  </script>

使用数据变量

要使用数据的data中的属性值,在绑定的标签中,使用{{变量名}}来引用,支持文本和数字。数字支持做运算

<div id="main" >

      <div>
        {{msg}},{{num+1}}
      </div>
    </div>

输出内容为

大家好,我是渣渣辉,124

使用html源码

在上面的data数据中,html参数是一个html内容,如果直接使用{{html}}引用的话,网页显示为纯文本

<p>我是一个HTML文本</p>

并不会解析源码。那么需要为标签添加v-html属性,属性名为html,或者其他带有html的内容的参数

<div id="main" >
      <div v-html="html">
        
      </div>
    </div>

输出内容会把这个标签的内容替换成html

为标签增加参数

html的标签中,可以使用Vue增加参数,给参数前面加上v-bind:即可,或者直接省略v-bind,使用:

其中url参数,已经在data中定义

<a v-bind:href="url">百度</a>
<a :href="url">百度</a>

绑定style

在data创建一个对象,名字随意,这个对象里面还要创建一个新对象,对象名称为css名称,属性为文本值属性。

如果存在有连接的样式,例如font-size,则转换成驼峰命名法:fontSize即可

var vue = new Vue({
      el: '#main',
      data: {
        msg: '大家好,我是渣渣辉',
        styletext:{
          color:'red',
          fontSize:'25px'
        }
      }
    })

在标签中添加属性:style

<div id="main" :style="styletext">
      {{msg}}
    </div>

效果如下:

大家好,我是渣渣辉

绑定class

绑定class有两种,直接文本数组方式或者对象方式

:class="['aaa','bbb']"
:class="{'aaa':true,'bbb':true}"

并且对象方式,可以使用判断表达式:

:class="{'aaa':true,'bbb':1>2}"

并且里面可以引用data中的参数

 

 

 

THE END