vue的插值問題

剛開始學(xué)習(xí)Vue,遇到了組件里面用插值的情況。

<!DOCTYPE html>
<html lang="cmn-hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <!--PC端必選   強制360瀏覽器使用webkit渲染 -->
    <meta name="renderer" content="webkit">
    <!-- 必選 響應(yīng)式  -->
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <title>Vue component組件 屬性</title>
</head>

<body>
    <h3>Vue component組件 初識</h3>
    <hr>
    <div id="app">
        <!--   使用局部組件 chj-->
        <!-- <local  :here="local"></local> -->
        <local :here="local"></local>
        <remote></remote>
    </div>
    <script>
    var app = new Vue({
        el: "#app",
        data: {
            local: 'China',
            remote: 'USA_main'
        },
        // <!-- 定義局部組件 -->
        components: {
            'local': {
                template: `
          <div style="color:green">
      我是局部組件local,來自{{here}}
  </div>
         `,
          //選項props 數(shù)值
                props: ['here'],
                data: function() {
                    return {
                        local: 'china_mainland'
                    }
                }
            },
            'remote': {
                template: `<p   style="{{colour}}">我是局部組件remote來自{{remote}}</p>`,
                data: function() {
                    return {
                       remote: 'USA_components',
                        colour:'"color:red"'
                   }
                }
            }
        }
    });
    </script>
</body>

</html>

控制臺報錯：

[Vue warn]: Error compiling template:

<p   style="{{colour}}">我是局部組件remote來自{{remote}}</p>

- style="{{colour}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">.


found in

---> <Remote>
       <Root>

改成v-bind，方式?jīng)]問題：

...
            'remote': {
                template: `<p   :style="colour">我是局部組件remote來自{{remote}}</p>`,
                data: function() {
                    return {
                       remote: 'USA_components',
                        colour:'color:red'
                   }
                }
            }
            ...

但是，如果想用插值方法的話，應(yīng)該怎么做?。?br>下面的方法不對：

            'remote': {
                template: `<p   style="color:{{colour}}">我是局部組件remote來自{{remote}}</p>`,
                data: function() {
                    return {
                       remote: 'USA_components',
                        colour:'red'
                   }
                }
            }

回答

編輯回答

老梗

VUE官方文檔上說了HTML特性上不支持這種寫法

2017年1月27日 19:21

編輯回答

哚蕾咪

屬性里已經(jīng)不能用差值了。
像你這種用法，直接:style="colour"就完了。
如果是拼串可以有兩種寫法

:style="'color:' + colour" 
// 正常拼串，字符串用單雙引號嵌套表示，剩下部分為js語句

:style="`color:${colour}`"
// 雙引號內(nèi)為js語句，整體使用es6 模板字符串

2018年1月16日 14:13

編輯回答

囍槑

<p :style="{color:colour}">我是局部組件remote來自{{remote}}</p>

2017年9月12日 02:18

編輯回答

野橘

'remote': {
    template: `<p  :style="colour">我是局部組件remote來自{{remote}}</p>`,
    data: function() {
        return {
           remote: 'USA_components',
            colour:'color:red'
       }
    }
}

2017年7月24日 21:58